Tengo un componente Clientes y uno Dashboard y luego el de login, pero no logro redirigir al login en caso de que no haya ingresado:
Tengo una carpeta security con un archivo auth.guard.ts:
import { Injectable } from "@angular/core";
import { Router,CanActivate,ActivatedRouteSnapshot } from "@angular/router";
@Injectable ({providedIn:'root'})
export class AuthGuard implements CanActivate{
constructor(private route : Router){
}
canActivate(route: ActivatedRouteSnapshot){
this.route.navigate(['login']);
return false;
}
}
Y este es mi app.module.ts:
import { BrowserModule } from "@angular/platform-browser";
import { NgModule,Input } from "@angular/core";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { Routes, RouterModule } from "@angular/router";
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
// material
import { MatSidenavModule } from "@angular/material/sidenav";
import { MatIconModule } from "@angular/material/icon";
import { MatListModule } from "@angular/material/list";
import { MatTooltipModule } from "@angular/material/tooltip";
import { MatButtonModule } from "@angular/material/button";
import { MatTableModule } from '@angular/material/table' ;
import { MatCardModule } from '@angular/material/card' ;
import { MatDialogModule} from '@angular/material/dialog' ;
import {MatInputModule} from '@angular/material/input';
import {MatSnackBarModule} from '@angular/material/snack-bar';
// components
import { AppComponent } from "./app.component";
import { SidenavComponent } from "./sidenav/sidenav.component";
import { HomeComponent } from "./home/home.component";
import { ClienteComponent } from './cliente/cliente.component';
import { HttpClientModule } from "@angular/common/http";
import { DialogClienteComponent } from "./cliente/dialog/dialogcliente.component";
import { FormsModule,ReactiveFormsModule } from "@angular/forms";
import { DialogDeleteComponent } from "./cliente/common/dialogdelete.component";
import { LoginComponent } from "./login/login.component";
export const ROUTES: Routes = [
{
path: "Home",
component: HomeComponent,
},
{
path: "login",
component: LoginComponent,
},
{
path: "Clientes",
component: ClienteComponent,
},
];
@NgModule({
declarations: [
AppComponent,
DialogClienteComponent,
DialogDeleteComponent,
SidenavComponent,
LoginComponent,
ClienteComponent
],
imports: [
RouterModule.forRoot(ROUTES, { relativeLinkResolution: 'legacy' }),
BrowserModule,
BrowserAnimationsModule,
MatSidenavModule,
MatListModule,
MatIconModule,
MatTooltipModule,
MatButtonModule,
MatTableModule,
MatDialogModule,
MatInputModule,
MatSnackBarModule,
MatCardModule,
HttpClientModule,
FormsModule,
ReactiveFormsModule,
],
bootstrap: [AppComponent],
})
export class AppModule {}
no se si alguien puede ayudarme, si necesitan otro codigo edito la pregunta.
Mi app.routing tiene lo siguiente:
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { ClienteComponent } from './cliente/cliente.component';
import { HomeComponent } from './home/home.component';
import { LoginComponent } from './login/login.component';
import { AuthGuard } from './security/auth.guard';
const routes: Routes = [
{ path: '', redirectTo: 'login', pathMatch: 'full' },
{ path: '**', redirectTo: 'login' },
{path: 'home',component:HomeComponent,canActivate:[AuthGuard]},
{path: 'Clientes',component:ClienteComponent,canActivate:[AuthGuard]},
{path: 'login',component:LoginComponent}
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
Ahi muestro mi login component:
import {Component, OnInit } from "@angular/core";
import { Router } from "@angular/router";
import { ApiAuthService } from "../services/apiauth.service";
@Component({templateUrl:'login.component.html'})
export class LoginComponent implements OnInit{
public user!: string;
public password!: string;
constructor(public apiauth:ApiAuthService,
private router:Router){
if (this.apiauth.usuarioData){
this.router.navigate(['/']);
}
}
ngOnInit(){
}
login(){
this.apiauth.login(this.user,this.password).subscribe(response =>{
if (response.exito===1) {
this.router.navigate(['/']);
}
});
}
}
Y mi apiauthservice.ts:
import { HttpClient, HttpHeaders } from "@angular/common/http";
import { Injectable } from "@angular/core";
import { BehaviorSubject, map, Observable } from "rxjs";
import { Usuario } from "../models/usuario";
import { Response } from "../models/response";
const httpOption = {
headers :new HttpHeaders({
'Content-Type' : 'application/json'
})
}
@Injectable({
providedIn:'root'
})
export class ApiAuthService{
url: string = 'https://localhost:44355/Login' ;
private usuarioSubject!: BehaviorSubject<Usuario>;
public get usuarioData():Usuario{
return this.usuarioSubject.value;
}
constructor(private http : HttpClient){
this.usuarioSubject = new BehaviorSubject<Usuario>(JSON.parse(localStorage.getItem('usuario')!));
}
login(user: string, password:string):Observable<Response>{
return this.http.post<Response>(this.url, {user,password},httpOption).pipe(map(res=>{
if(res.exito === 1){
const usuario:Usuario = res.data;
localStorage.setItem('usuario',JSON.stringify(usuario));
this.usuarioSubject.next(usuario);
}
return res;
}));
}
logout(){
localStorage.removeItem('usuario');
this.usuarioSubject.next(null!);
}
}
El canActivate quedo asi pero sigue sin funcionar:
canActivate(route: ActivatedRouteSnapshot){
const usuario = this.apiauthservice.usuarioData;
if (usuario){
return true;
}else{
this.route.navigate(['login']);
return false;
}
canActivate
agrega el código que usas para saber si un usuario está logueado.