保护视图，身份验证或可以使用ui-router激活Angular 2

Question

我想我可以尝试在 Angular 2 中使用ui-router。

目前，我已经有一些默认的angular2-router配置，主要归结为：

export const homeRoute: Route = {
path: '',
component: HomeComponent,
canActivate: [AuthGuard]
};

ui-router文档显示了一个类似的例子，文档：

export let state1: Ng2StateDeclaration = {
name: 'state1',
component: State1Component,
url: '/one'
}

这很好，但缺少一个键：canActivate.

在 Angular 1 中，我使用了一个很棒的库：angular-permission，但它不适用于 Angular 2。

我目前不需要花哨的权限，一个简单的真/假身份验证就可以了，但是，我根本不知道如何保护我的路由。

我尝试过搜索，但这个话题太新鲜了，没有可用的示例。

感谢您的所有想法。

Answer 1

我相信您需要按照 API 文档中的说明使用TransitionService.onBefore()。此类是 Angular 1 和 2 之间共享的ui-router-core包的一部分。它是 Angular 1 中$transitions的直接替代品。

简单地说，使用

TransitionService.onBefore({to: 'requiresAuth.*'}, (transition: Transition) => {
let auth = transition.injector().get(YourOwnAuthService);
if (!auth.isLoggedIn()) {
return transition.router.stateService.target('login');
}
return true;
});

可以将回调提取到function checkAuthentication(transition: Transition): boolean并将此函数应用于多个基本状态。例如

['dashboard.*', 'report.*', 'sale.*'].forEach(state => {
TransitionService.onBefore({to: state}, checkAuthentication);
});

此代码片段可以放在 ui 路由器状态定义的正下方。

Answer 2

我想为您提供一个实现这一点的PoC应用程序。请直接从 Github 找到它，因为代码对于消息框来说可能太多了。

LoggedInGuard("/app/shared/guards/logged-in.guard.ts") https://github.com/AFigueroa/angular2-poc/blob/master/app/shared/guards/logged-in.guard.ts

AppRoutingModule("/app/app-routing.module.ts") https://github.com/AFigueroa/angular2-poc/blob/master/app/app-routing.module.ts