Как применять canActivate на всех маршрутах?

У меня есть угловая активная защита, которая обрабатывает, если пользователь не вошел в систему, перенаправляет его на страницу входа:

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

Я должен реализовать его на каждом маршруте, например:

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

Есть ли лучший способ реализовать параметр canActive без добавления его к каждому пути.

Я хочу добавить его на основной маршрут, и он должен применяться ко всем другим маршрутам. Я искал много, но я не нашел никакого полезного решения

благодаря

Ответы

Ответ 1

Вы можете ввести бескомпромиссный родительский маршрут и применить там охрану:

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

Ответ 2

Я думаю, вы должны реализовать "детскую маршрутизацию", которая позволяет вам иметь родителя (например, путь "admin") и его дочерние элементы.

Затем вы можете применить canactivate к родительскому элементу, который автоматически ограничит доступ ко всему его ребенку. Например, если я хочу получить доступ к "admin/home", мне нужно пройти через "admin", который защищен canActivate. Вы даже можете определить родителя с пустым путем "", если хотите

Ответ 3

Вы также можете подписаться на изменения маршрута маршрутизатора в своей функции app.component ngOnInit и проверить аутентификацию оттуда, например

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

Я предпочитаю этот способ делать какие-либо проверки приложения (ов) при изменении маршрута.

Ответ 4

Я наткнулся на этот пример при поиске и был пойман на примере, приведенном в примере.

Вы должны убедиться, что защитник возвращает true, если вы хотите показать дочерние маршруты.

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