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.