3

我正在尝试对路由进行访问检查并显示拒绝访问页面而不是实际页面。从下面的示例中，我们可以在路由 click 上提醒访问被拒绝。我宁愿导航到实际页面，然后显示拒绝访问。

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。并且组件功能不应该执行。

如果您能想到实施的方法和选项，请分享。

如果描述不清楚，请告诉我，我会尽力使它更好。

4

2 回答 2

4

你可以在 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;
        }
    }
}

希望这可以帮助你。

于 2016-12-22T11:13:28.317 回答
0

1) 实现 CanActivate 逻辑

2) 实现受保护的组件并为其添加路由（例如：'denied'）。

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;
    }
  }
于 2017-01-12T04:35:26.290 回答