Angular 5/6: защита маршрута (защита маршрута) без перенаправления на ошибочный маршрут

Когда-то я работал над подобной проблемой.

Делюсь своим stackblitz poc, где я создал -

• Аутентифицированный компонент (с защитой)
• Компонент входа
• Охранник разрешений
• Маршрут (/auth маршрут предоставляется с PermissionGuardService охраной)

Охранник оценивает тип пользователя и соответствующим образом обрабатывает перенаправление/ошибку.

Варианты использования -

• Пользователь не вошел в систему (shows a toast with log in message)
• Пользователь не является администратором (shows a toast with unauthorised message)
• Пользователь является администратором (show a toast with success messaage)

Я сохранил пользователя в локальном хранилище.

РЕДАКТИРОВАТЬ - ДЕМО

Дайте мне знать, если вам нужна специальная обработка, и я обновлю кодовую базу.

Ваше здоровье!

Посмотрев на пример angular2 предоставлено Таруном Лалвани в комментариях к вопросу и после более глубокого изучения статьи о динамическом загрузчике компонентов в документах Angular мне удалось применить его к моему коду:

Я больше не использую свой RouteGuard при указании маршрутов:

{
     path: 'protected/foo',
     component: FooViewComponent,
     data: {allowAccessTo: ['Administrator']}, // admin only
     canActivate: [RouteGuard]
},

Вместо этого я создал специальный RouteGuardComponent и вот как я его использую:

{
    path: 'protected/foo',
    component: RouteGuardComponent,
    data: {component: FooViewComponent, allowAccessTo: ['Administrator']}
},

Это код RouteGuardComponent:

@Component({
    selector: 'app-route-guard',
    template: '<ng-template route-guard-bind-component></ng-template>
    // note the use of special directive ^^
})
export class RouteGuardComponent implements OnInit {

    @ViewChild(RouteGuardBindComponentDirective)
    bindComponent: RouteGuardBindComponentDirective;
    // ^^ and here we bind to that directive instance in template

    constructor(
        private auth: AuthService,
        private route: ActivatedRoute,
        private componentFactoryResolver: ComponentFactoryResolver
    ) {
    }

    ngOnInit() {
        const {auth, route, componentFactoryResolver, bindComponent} = this;
        const {component, allowAccessTo} = route.snapshot.data;
        const identity = auth.getIdentity();
        const hasAccess = identity && allowAccessTo.indexOf(identity.role);
        const componentFactory = componentFactoryResolver.resolveComponentFactory(
            hasAccess ?
               component : // render component
               ErrorForbiddenViewComponent // render Forbidden view
        );
        // finally use factory to create proper component
        routeGuardBindComponentDirective
            .viewContainerRef
            .createComponent(componentFactory);
    }

}

Кроме того, для этого требуется определить специальную директиву (я уверен, что это можно сделать каким-то другим способом, но я только что применил этот пример динамического компонента из документации Angular):

@Directive({
    selector: '[route-guard-bind-component]'
})
export class RouteGuardBindComponentDirective {
    constructor(public viewContainerRef: ViewContainerRef) {}
}

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

Ваш RouteGuard может внедрить любой сервис, который вы используете для модальных окон, а .canActivate() может открыть модальное окно без перенаправления, чтобы информировать пользователя, не нарушая текущее состояние приложения.

Для этого мы используем toastr и его оболочку angular, так как он создает немодальное всплывающее окно, которое самозакрывается через столько секунд, что кнопки OK/Отмена не нужны.

Я недавно столкнулся с той же проблемой. В конце концов, мне не удалось сделать это с помощью CanActivate guard, поэтому я реализовал логику авторизации в компоненте, который содержит <router-outlet>.

Вот его шаблон:

<div class="content">
  <router-outlet *ngIf="(accessAllowed$ | async) else accessDenied"></router-outlet>
</div>
<ng-template #accessDenied>
  <div class="message">
    <mat-icon>lock</mat-icon>
    <span>Access denied.</span>
  </div>
</ng-template>

И его исходный код:

import { ActivatedRoute, ActivationStart, Router } from '@angular/router';
import { filter, switchMap, take } from 'rxjs/operators';
import { merge, Observable, of } from 'rxjs';
import { Component } from '@angular/core';

@Component({
  selector: 'app-panel-content',
  templateUrl: './content.component.html',
  styleUrls: ['./content.component.scss'],
})
export class PanelContentComponent {

  /**
   * A stream of flags whether access to current route is permitted.
   */
  accessAllowed$: Observable<boolean>;

  constructor(
    permissions: UserPermissionsProviderContract, // A service for accessing user permissions; implementation omitted
    route: ActivatedRoute,
    router: Router,
  ) {
    const streams: Observable<boolean>[] = [];

    /*
    The main purpose of this component is to replace `<router-outlet>` with "Access denied" 
    message, if necessary. Such logic will be universal for all possible route components, and 
    doesn't require any additional components - you will always have at least one component with
    `<router-outlet>`.

    This component contains `<router-outlet>`, which by definition means that all possible authorisable 
    routes are beneath it in the hierarchy.
    This implicates that we cannot listen to `route.data` observable of `ActivatedRoute`, because the route 
    itself in this component will always be the parent route of the one we need to process. 

    So the only real (the least hacky, IMO) solution to access data of child routes is to listen to
    router events.
    However, by the time an instance of this component is constructed, all routing events will have been 
    triggered. This is especially important in case user loads the page on this route.

    To solve that, we can merge two streams, the first one of which will be a single access flag 
    for **activated route**, and the second will be a stream of flags, emitted from router 
    events (e.g. caused by user navigating through app).

    This approach requires that the authorised route is bottom-most in the hierarchy, because otherwise the 
    last value emitted from the stream created from router events will be `true`.
    */

    const deepestChild = this.findDeepestTreeNode(route);
    const currentData = deepestChild.routeConfig.data;

    // `data.authActions` is just an array of strings in my case
    if (currentData && 
        currentData.authActions && 
        Array.isArray(currentData.authActions) && 
        currentData.authActions.length > 0) {

      streams.push(
        // `hasPermissions(actions: strings[]): Observable<boolean>`
        permissions.hasPermissions(currentData.authActions).pipe(take(1))
      );

    } else {
      // If the route in question doesn't have any authorisation logic, simply allow access
      streams.push(of(true));
    }

    streams.push(router.events
      .pipe(
        filter(e => e instanceof ActivationStart),
        switchMap((event: ActivationStart) => {
          const data = event.snapshot.data;

          if (data.authActions && 
            Array.isArray(currentData.authActions) && 
            data.authActions.length > 0) {

            return permissions.hasPermissions(data.authActions);
          }

          return of(true);
        }),
      ));

    this.accessAllowed$ = merge(...streams);
  }

  /**
   * Returns the deepest node in a tree with specified root node, or the first 
   * encountered node if there are several on the lowest level.
   * 
   * @param root The root node.
   */
  findDeepestTreeNode<T extends TreeNodeLike>(root: T): T {
    const findDeepest = (node: T, level = 1): [number, T] => {
      if (node.children && node.children.length > 0) {
        const found = node.children.map(child => findDeepest(child as T, level + 1));
        found.sort((a, b) => a[0] - b[0]);

        return found[0];

      } else {
        return [level, node];
      }
    };

    return findDeepest(root)[1];
  }

}

interface TreeNodeLike {
    children?: TreeNodeLike[];
}

Я объяснил подход в комментариях к исходному коду, но вкратце: получить доступ к данным авторизации в route.data с помощью событий маршрутизатора и заменить <router-outlet> сообщением об ошибке, если доступ запрещен.