Wie kann man canActivate Guard auf allen Routen anwenden?

Ich habe einen aktiven Schutz von angle2, der behandelt, wenn der Benutzer nicht angemeldet ist, ihn auf die Anmeldeseite umzuleiten:

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

Ich muss es auf jeder Route implementieren wie:

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

Gibt es eine bessere Möglichkeit, die Option canActive zu implementieren, ohne sie jedem Pfad hinzuzufügen?

Was ich möchte, ist, es auf der Hauptroute hinzuzufügen, und es sollte für alle anderen Routen gelten. Ich habe viel gesucht, aber ich konnte keine nützliche Lösung finden

Vielen Dank

Sie können eine komponentenlose übergeordnete Route einführen und den Guard dort anwenden:

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

Sie können auch die Routenänderungen des Routers in der ngOnInit-Funktion Ihrer app.component abonnieren und von dort aus die Authentifizierung überprüfen, z

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

Ich bevorzuge diese Art der Durchführung von App-weiten Überprüfungen, wenn sich eine Route ändert.

Ich denke, Sie sollten "Child Routing" implementieren, mit dem Sie einen Elternteil (mit dem Pfad "admin" zum Beispiel) und seine Kinder haben können.

Anschließend können Sie dem Elternteil eine Aktivierung zuweisen, die den Zugriff auf alle seine Kinder automatisch einschränkt. Wenn ich beispielsweise auf "admin / home" zugreifen möchte, muss ich "admin" durchlaufen, das von canActivate geschützt wird. Sie können sogar ein übergeordnetes Element mit einem leeren Pfad "" definieren, wenn Sie möchten