1

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;
    } 

2
  • En el canActivate agrega el código que usas para saber si un usuario está logueado.
    – Lobos
    Commented el 19 sept. 2021 a las 0:22
  • Ahi edite la pregunta, muestro el canActivate pero no funciona.
    – Caruso
    Commented el 19 sept. 2021 a las 16:00

3 respuestas 3

0

Agrega el / para completar la ruta.

 canActivate(route: ActivatedRouteSnapshot){
            const usuario = this.apiauthservice.usuarioData;
            if (usuario){
               return true;
            }else{
              this.route.navigate(['/login']);
              return false;
            } 
    }
1
  • Tampoco me funciona. Si bien no sé muestran los datos no me redirige al login..tengo que ir manualmente..
    – Caruso
    Commented el 20 sept. 2021 a las 20:03
0

Creo que la variable route que recibe tu canActivate es la del problema, ya que estarias usando la del metodo y no la del constructor, tu varible router se convertiria a una variable de scoop. Espero te funcione.

canActivate(): boolean{

    this.route.navigate(['login']);
    return false;
}
1
  • Gracias por tu aporte..Tampoco funciona..si pongo un alert por ejemplo dentro del canActivate no me muestra nada tampoco.
    – Caruso
    Commented el 22 sept. 2021 a las 14:55
0

Se soluciono modificando app.module.ts, agregando el AuthGuard en las rutas, aunque el tutorial que vi lo tenia en app.routing.ts tal como publique en la pregunta:

export const ROUTES: Routes = [
{
 path: "Home",
 canActivate: [AuthGuard],
 component: HomeComponent,
},
{
  path: "login",
  component: LoginComponent,
},
{
path: "Clientes",
component: ClienteComponent,
canActivate: [AuthGuard],
},

];

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.