Tengo un protector activo angular2 que maneja si el usuario no ha iniciado sesión, lo redirige a la página de inicio de sesión:
import { Injectable } from "@angular/core"; import { CanActivate , ActivatedRouteSnapshot, RouterStateSnapshot, Router} from "@angular/router"; import {Observable} from "rxjs"; import {TokenService} from "./token.service"; @Injectable() export class AuthenticationGuard implements CanActivate { constructor ( private router : Router, private token : TokenService ) { } /** * Check if the user is logged in before calling http * * @param route * @param state * @returns {boolean} */ canActivate ( route : ActivatedRouteSnapshot, state : RouterStateSnapshot ): Observable<boolean> | Promise<boolean> | boolean { if(this.token.isLoggedIn()){ return true; } this.router.navigate(['/login'],{ queryParams: { returnUrl: state.url }}); return; } }Tengo que implementarlo en cada ruta como:
const routes: Routes = [ { path : '', component: UsersListComponent, canActivate:[AuthenticationGuard] }, { path : 'add', component : AddComponent, canActivate:[AuthenticationGuard]}, { path : ':id', component: UserShowComponent }, { path : 'delete/:id', component : DeleteComponent, canActivate:[AuthenticationGuard] }, { path : 'ban/:id', component : BanComponent, canActivate:[AuthenticationGuard] }, { path : 'edit/:id', component : EditComponent, canActivate:[AuthenticationGuard] } ];¿Hay alguna forma mejor de implementar la opción canActive sin agregarla a cada ruta?
Lo que quiero es agregarlo en la ruta principal y debería aplicarse a todas las demás rutas. He buscado mucho, pero no pude encontrar ninguna solución útil.
Gracias
Puede introducir una ruta principal sin componentes y aplicar la protección allí:
const routes: Routes = [ {path: '', canActivate:[AuthenticationGuard], children: [ { path : '', component: UsersListComponent }, { path : 'add', component : AddComponent}, { path : ':id', component: UserShowComponent }, { path : 'delete/:id', component : DeleteComponent }, { path : 'ban/:id', component : BanComponent }, { path : 'edit/:id', component : EditComponent } ]} ];También puede suscribirse a los cambios de ruta del enrutador en la función ngOnInit de su app.component y verificar la autenticación desde allí, por ejemplo
this.router.events.subscribe(event => { if (event instanceof NavigationStart && !this.token.isLoggedIn()) { this.router.navigate(['/login'],{ queryParams: { returnUrl: state.url}}); } });Prefiero esta forma de hacer cualquier tipo de verificación en toda la aplicación cuando cambia una ruta.
Creo que debería implementar un "enrutamiento secundario" que le permita tener un padre (con una ruta "administrador", por ejemplo) y sus hijos.
Luego puede aplicar un canactivate al padre que restringirá automáticamente el acceso a todos sus hijos. Por ejemplo, si quiero acceder a "admin/home", tendré que pasar por "admin", que está protegido por canActivate. Incluso puede definir un padre con una ruta vacía "" si lo desea