Question

我试图对路由进行访问检查并显示拒绝访问页面而不是实际页面。从下面的示例中，我们可以在路由点击时提醒拒绝访问。我宁愿导航到实际页面，然后显示Access denied。

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

让我们说访问权限检查的网址为/admin/manageusers，组件名称为ManageUserComponent，如果用户无法访问并尝试访问该网址，则应该导航到路由{{1}但应该显示/admin/manageusers。

1.我能做的一件事就是使用路由Access Denied in the page功能并获取与用户访问相关的值，并在resolve中切换模板。这种方法最终会在与我想要实现访问逻辑的路由相关联的多个组件中具有类似的代码。

让所有需要访问检查的ManageUserComponent扩展另一个component并验证上面的逻辑，如果成功则允许子组件继续。然而要弄清楚如何正确地扩展另一个班级

主要目标是在页面中保留带有错误消息的已访问网址。并且组件函数不应该执行。

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

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

Answer 1

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

希望这可以帮助你。

Answer 2

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

Angular2 Route Access拒绝逻辑

2 个答案: