Angular 4 Multiple Guard — последовательность выполнения

Взгляните на это руководство по Angular (ссылка) . «Если вы использовали API реального мира, может возникнуть некоторая задержка, прежде чем данные для отображения будут возвращены с сервера. Вы не хотите отображать пустой компонент во время ожидания данных.

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

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

Вам нужен резолвер».

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

У меня есть RequireAuthenticationGuard и RequirePermissionGuard. Для большинства маршрутов они должны работать оба, но есть определенный порядок, который мне требуется.

RequireAuthenticationGuard зависит от моих служб аутентификации, чтобы проверить, аутентифицирован ли текущий сеанс.

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

Я добавляю RequireAuthenticationGuard в качестве зависимости конструктора от RequirePermissionGuard и начинаю проверять разрешения только в том случае, если аутентификация была определена.

require-authentication.guard.ts

constructor(
    private userSessionSerivce: UserSessionService) {}

canActivate(
    _route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot,
): Observable<boolean> {
    return this.validateAuthentication(state.url);
}

require-permission.guard.ts

constructor(
    private permissionService: PermissionService,
    /**
    * We use the RequireAuthenticationGuard internally
    * since Angular does not provide ordered deterministic guard execution in route definitions
    *
    * We only check permissions once authentication state has been determined
    */
    private requireAuthenticationGuard: RequireAuthenticatedGuard,
) {}

canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot,
): Observable<boolean> {
    const requiredPermissions: Permission[] = next.data.permissions || [];

    return this.requireAuthenticationGuard
        .canActivate(next, state)
        .pipe(
            mapTo(this.validateAuthorization(state.url, requiredPermissions)),
        );
}

Использование Master Guard для срабатывания защиты приложений может помочь.

РЕДАКТИРОВАТЬ: Добавление фрагмента кода для лучшего понимания.

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

Решение

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

Конфигурация маршрутизации в этом случае будет содержать главную защиту в качестве единственной защиты.

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

Свойство data — это пара ключ-значение, которая позволяет нам присоединять данные к маршрутам.

Затем к данным можно получить доступ в сторожах, используя параметр ActivatedRouteSnapshot метода canActivate в стороже.

Решение выглядит сложным, но после интеграции в приложение оно обеспечит правильную работу охранников.

Следующий пример объясняет этот подход -

Пример

<сильный>1. Объект констант для сопоставления всех средств защиты приложений -

export const GUARDS = {
    GUARD1: "GUARD1",
    GUARD2: "GUARD2",
    GUARD3: "GUARD3",
    GUARD4: "GUARD4",
}

<сильный>2. Защита приложений –

import { Injectable } from "@angular/core";
import { Guard4DependencyService } from "./guard4dependency";

@Injectable()
export class Guard4 implements CanActivate {
    //A  guard with dependency
    constructor(private _Guard4DependencyService:  Guard4DependencyService) {}

    canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot): Promise<boolean> {
        return new Promise((resolve: Function, reject: Function) => {
            //logic of guard 4 here
            if (this._Guard4DependencyService.valid()) {
                resolve(true);
            } else {
                reject(false);
            }
        });
    }
}

<сильный>3. Конфигурация маршрутизации —

import { Route } from "@angular/router";
import { View1Component } from "./view1";
import { View2Component } from "./view2";
import { MasterGuard, GUARDS } from "./master-guard";
export const routes: Route[] = [
    {
        path: "view1",
        component: View1Component,
        //attach master guard here
        canActivate: [MasterGuard],
        //this is the data object which will be used by 
        //masteer guard to execute guard1 and guard 2
        data: {
            guards: [
                GUARDS.GUARD1,
                GUARDS.GUARD2
            ]
        }
    },
    {
        path: "view2",
        component: View2Component,
        //attach master guard here
        canActivate: [MasterGuard],
        //this is the data object which will be used by 
        //masteer guard to execute guard1, guard 2, guard 3 & guard 4
        data: {
            guards: [
                GUARDS.GUARD1,
                GUARDS.GUARD2,
                GUARDS.GUARD3,
                GUARDS.GUARD4
            ]
        }
    }
];

<сильный>4. Главный страж -

import { Injectable } from "@angular/core";
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, Router } from "@angular/router";

//import all the guards in the application
import { Guard1 } from "./guard1";
import { Guard2 } from "./guard2";
import { Guard3 } from "./guard3";
import { Guard4 } from "./guard4";

import { Guard4DependencyService } from "./guard4dependency";

@Injectable()
export class MasterGuard implements CanActivate {

    //you may need to include dependencies of individual guards if specified in guard constructor
    constructor(private _Guard4DependencyService:  Guard4DependencyService) {}

    private route: ActivatedRouteSnapshot;
    private state: RouterStateSnapshot;

    //This method gets triggered when the route is hit
    public canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Promise<boolean> {

        this.route = route;
        this.state = state;

        if (!route.data) {
            Promise.resolve(true);
            return;
        }

        //this.route.data.guards is an array of strings set in routing configuration

        if (!this.route.data.guards || !this.route.data.guards.length) {
            Promise.resolve(true);
            return;
        }
        return this.executeGuards();
    }

    //Execute the guards sent in the route data 
    private executeGuards(guardIndex: number = 0): Promise<boolean> {
        return this.activateGuard(this.route.data.guards[guardIndex])
            .then(() => {
                if (guardIndex < this.route.data.guards.length - 1) {
                    return this.executeGuards(guardIndex + 1);
                } else {
                    return Promise.resolve(true);
                }
            })
            .catch(() => {
                return Promise.reject(false);
            });
    }

    //Create an instance of the guard and fire canActivate method returning a promise
    private activateGuard(guardKey: string): Promise<boolean> {

        let guard: Guard1 | Guard2 | Guard3 | Guard4;

        switch (guardKey) {
            case GUARDS.GUARD1:
                guard = new Guard1();
                break;
            case GUARDS.GUARD2:
                guard = new Guard2();
                break;
            case GUARDS.GUARD3:
                guard = new Guard3();
                break;
            case GUARDS.GUARD4:
                guard = new Guard4(this._Guard4DependencyService);
                break;
            default:
                break;
        }
        return guard.canActivate(this.route, this.state);
    }
}

Проблемы

Одной из проблем при таком подходе является рефакторинг существующей модели маршрутизации. Однако это можно сделать по частям, так как изменения не являются критическими.

Надеюсь, это поможет.

Просто создайте основную защиту, которая вводит вспомогательные защиты, вот пример:

app.guard.ts

import { Injectable } from '@angular/core';
import { ActivatedRouteSnapshot, CanActivate, RouterStateSnapshot } from '@angular/router';
import { GuardA } from '...';
import { GuardB } from '...';

@Injectable({
    providedIn: 'root',
})
export class AppGuard implements CanActivate {

    constructor(
        // inject your sub guards
        private guardA: GuardA,
        private guardB: GuardB,
    ) {
    }

    public async canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot): Promise<boolean> {
        for (const guard of this.getOrderedGuards()) {
            if (await guard.canActivate(next, state) === false) {
                return false;
            }
        }
        return true;
    }

 // -> Return here the sub guards in the right order
    private getOrderedGuards(): CanActivate[] {
        return [
            this.guardA,
            this.guardB,
        ];
    }
}

Затем в вашем приложении-routing.module.ts

const routes: Routes = [
    {
        path: 'page',
        loadChildren: './pages.module#PageModule',
        canActivate: [AppGuard],
    }
];

Конечно, вы должны управлять своими модулями так, чтобы охранники были предоставлены (понять вводимые) в ваш AppGuard.