Angular2 路由访问被拒绝逻辑

Question

我正在尝试对路由进行访问检查并显示访问被拒绝的页面而不是实际页面。从下面的示例中，我们可以警告路线单击时拒绝访问。我更愿意导航到实际页面，然后显示访问被拒绝。

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

假设进行访问检查的 url 是 /admin/manageusers ，组件名称是 ManageUserComponent ，如果用户没有访问权限并尝试该 url，则应该导航到路由/admin/manageusers，但应该显示页面中拒​​绝访问。

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

让所有需要访问检查的组件扩展另一个基类并验证上述逻辑，如果成功则允许子组件继续。还没有弄清楚如何正确扩展另一个类

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

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

如果描述不清楚，请告诉我，我会尽力改进。

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(['/'], { skipLocationChange: true });
            // abort current navigation
            return false;
        }
    }
}

希望这可以帮助你。