web-dev-qa-db-fra.com

Comment appliquer CanActivate Guard sur tous les itinéraires?

J'ai une garde active angular2 qui gère si l'utilisateur n'est pas connecté, redirigez-le vers la page de connexion:

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

Je dois l'implémenter sur chaque route comme:

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

Existe-t-il un meilleur moyen d'implémenter l'option canActive sans l'ajouter à chaque chemin.

Ce que je veux, c'est l'ajouter sur la route principale, et cela devrait s'appliquer à toutes les autres routes. J'ai cherché beaucoup, mais je n'ai trouvé aucune solution utile

Merci

angulartypescriptangular-routing
50
Nimatullah Razmjo

Vous pouvez introduire une route parente sans composant et y appliquer la protection:

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 }
    ]}
];
116
Günter Zöchbauer

Vous pouvez également vous abonner aux modifications d’itinéraire du routeur dans la fonction ngOnInit de votre app.component et vérifier l’authentification à partir de là, par exemple.

    this.router.events.subscribe(event => {
        if (event instanceof NavigationStart && !this.token.isLoggedIn()) {
            this.router.navigate(['/login'],{ queryParams: { returnUrl: state.url}}); 
        }
    });

Je préfère cette façon de procéder pour tout type de vérification d'application large lorsqu'un itinéraire change.

5
Alan Smith

Je pense que vous devriez implémenter le "routage enfant" qui vous permet d'avoir un parent (avec un chemin "admin" par exemple) et ses fils.

Ensuite, vous pouvez appliquer une option canactivate au parent, ce qui limitera automatiquement l'accès à tous ses enfants. Par exemple, si je veux accéder à "admin/home", je dois passer par "admin" qui est protégé par canActivate. Vous pouvez même définir un parent avec un chemin vide "" si vous voulez

3
Simrugh