angular - ejemplo - ¿Cómo aplicar canActivate guard en todas las rutas?

canactivate angular 5

Question

Tengo un protector activo angular2 que maneja si el usuario no está conectado, rediríjalo 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 manera 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

Answer 1

Creo que debe implementar el "enrutamiento de niños" que le permite tener un padre (con una ruta "admin" por ejemplo) y sus hijos.

Luego puede aplicar una activación 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

Answer 2

Encontré este ejemplo cuando buscaba y me sorprendió el ejemplo dado en el ejemplo.

Debe asegurarse de que el protector devuelve verdadero si desea mostrar las rutas secundarias.

@Injectable()
export class AuthenticationGuard implements CanActivate {

    constructor(
        private router: Router,
        private authService: AuthService) { }

    canActivate(
        route: ActivatedRouteSnapshot,
        state: RouterStateSnapshot
    ): Observable<boolean> | Promise<boolean> | boolean {

        // Auth checking code here

        // Make sure you return true here if you want to show child routes
        return true;
    }
} 

Answer 3

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

Answer 4

También puede suscribirse a los cambios de ruta del enrutador en la función ngOnInit de su aplicación 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 (s) amplia de la aplicación cuando cambia una ruta.