使用ui- canActivate保护Angular 2的视图、身份验证或路由器

Question

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

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

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

ui-router文档显示了一个类似的示例，即docs

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

这将做得很好，但缺少一个关键：canActivate。

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

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

我试过搜索，但主题太新鲜了，没有可用的例子。

谢谢你所有的点子。

Answer 1

我认为您需要使用API doc中描述的TransitionService.onBefore()。这个类是Angular 1和Angular 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//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