Логика отказа в доступе к маршруту Angular2

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

http://plnkr.co/edit/w1NCkGs0Tv5TjivYMdvt?p=preview

скажем, URL-адрес с проверкой доступа — /admin/manageusers, а имя компонента — ManageUserComponent, и если пользователь не имеет доступа и пробует URL-адрес, он должен перейти к маршруту /admin/manageusers, но должен показывать Access Denied in the page.

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

  1. Пусть все component, где требуется проверка доступа, расширяют еще один base class и подтверждают приведенную выше логику, в случае успеха разрешают продолжение дочернего компонента. Тем не менее, чтобы выяснить, как правильно расширить другой класс

Основная цель — сохранить доступный URL-адрес с сообщением об ошибке на странице. И функции компонента не должны выполняться.

Если вы можете придумать подходы и варианты реализации, пожалуйста, поделитесь.

Если описание непонятно, дайте мне знать, я постараюсь сделать его лучше.


angular angular2-routing angular2-router
person tomalex    schedule 22.12.2016    source источник

Ответы (2)


arrow_upward
4
arrow_downward

Вы можете сделать что-то подобное на app-routing.module.ts

// PRIVATE ROUTES
{
    path: 'dashboard',
    component: DashboardComponent,
    canActivate: [LoggedInGuard]
},

затем определите эту службу LoggedInGuard

// logged-in.guard.ts
import { Injectable } from '@angular/core';
import { Router, CanActivate } from '@angular/router';
import { AuthService } from './auth.service';

@Injectable()
export class LoggedInGuard implements CanActivate {
    constructor(
        private _router: Router,
        private _authService: AuthService) { }

    canActivate() {
        // return true
        if (this._authService.isLogged()) {
            // all ok, proceed navigation to routed component
            return true;
        }
        else {
            // redirect to the homepage
            this._router.navigate(['/']);
            // abort current navigation
            return false;
        }
    }
}

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

person nomadev    schedule 22.12.2016
comment
Я знал о canActivate, но проблема в том, что в случае else он перенаправляется на страницу login, не оставаясь на той же странице, к которой обращался пользователь. Моя цель - сохранить тот же URL-адрес с другим компонентом и просмотреть, если это возможно. - person tomalex; 22.12.2016

arrow_upward
0
arrow_downward

1) Реализовать логику CanActivate

2) Реализовать защищенный компонент и добавить к нему маршрут (например: «запрещено»).

3) Используйте опцию skipLocationChange для навигации по маршрутизатору

@Injectable()
export class CanActivateRequestForm implements CanActivate {
  constructor(private authService: AuthService, private router: Router) {}
  canActivate(
  route: ActivatedRouteSnapshot,
  state: RouterStateSnapshot
  ): Observable<boolean>|Promise<boolean>|boolean {
  let obs = this.authService.userChange.asObservable().map(user => user.role === Role.Admin);
        obs.subscribe(v => {
        if (!v)
          this.router.navigate(['denied'], {
            skipLocationChange: true
          });
      });
      return obs;
    }
  }
person Sergey Romanchuk    schedule 12.01.2017