Angular2路由canActivate和AuthGuard（JWT）

Question

在这种exaple project智威汤逊验证我们自身如何只允许被授权的用户的一些路线：

import { RouterConfig } from '@angular/router'; 
import { Home } from './home'; 
import { Login } from './login'; 
import { Signup } from './signup'; 
import { AuthGuard } from './common/auth.guard'; 

export const routes: RouterConfig = [ 
    { path: '',  component: Login }, 
    { path: 'login', component: Login }, 
    { path: 'signup', component: Signup }, 
    { path: 'home', component: Home, canActivate: [AuthGuard] }, 
    { path: '**',  component: Login }, 
]; 

我想作一步，也表明了什么用户角色有'访问'路由 - 但我不知道如何将参数传递给canActivate AuthGuard (src)。所以我想实现这样的事情（比如我有两个角色：管理员和员工）：

{ path: 'home', component: Home, canActivate: [AuthGuard] }, 
    { path: 'users', component: AdminUsers, canActivate: [AuthGuard('Admin')] }, 
    { path: 'users', component: Employees, canActivate: [AuthGuard('Employee')] }, 

凡我AuthGuard可能看起来像这样（其中的UserRole（=管理员或雇员，或空）传递参数AuthGuard）：

@Injectable() 
export class AuthGuard implements CanActivate { 
    constructor(private router: Router) {} 

    canActivate(userRole) { 
    if (!userRole || JWT.user().role == userRole) { 
     return true; 
    } 

    this.router.navigate(['/login']); 
    return false; 
    } 
} 

其中JWT.user.role是帮助其读取存储在JWT令牌用户角色。有没有办法做类似上面的想法？

Answer 1

CanActivate的签名将不会允许您通过userRole，如您所愿。 https://github.com/angular/angular/blob/2.0.0-rc.4/modules/%40angular/router/src/interfaces.ts#L54

最好为每个用户角色案例分别设置类。这是在官方文档也指导：https://angular.io/docs/ts/latest/api/router/index/CanActivate-interface.html

Answer 2

注意：适用于角rc.4 <

@KamilKiełczewski，@NikolayRusev，

1. 加入航线附加数据有一系列路线：

... 
{ 
    path: "customers", 
    component: CustomersCmp, 
    data: { roles: ["admin"] } 
}, 
... 

和CanActivate你可以从第一个参数得到path，搜索在航线配置相同的路径和从数据得到你所描述的角色：

public canActivate(route: ActivatedRouteSnapshot): boolean { 
    let path = route._urlSegment.pathsWithParams[0].path; 
    let roles; 

    if (route._routeConfig.path == path) { 
     roles = route._routeConfig.data.roles 
    } else { 
     roles = route._routeConfig.children.find(_route => _route.path == path).data.roles; 
    } 

    if (...) { 
     return true; 
    } 

    return false; 
} 

当然会更好，以避免私人财产，并可以，但我不记得我是如何做到的。

但是对于我的手表，我用不同的方式重新配置它。这种方法的巨大缺点，我的意思是基于角色的防范，就是每个拥有不同角色的用户都可以看到所有的路由，如果你不自动地在组件中渲染它们。

可以延长router-outlet

• http://www.captaincodeman.com/2016/03/31/angular2-route-security/
• https://medium.com/@blacksonic86/authentication-in-angular-2-958052c64492#.cxgoan9go

Answer 3

您可以设置路由的data参数，像这样的角色

const appRoutes: Routes = [ 
 
{ 
 
    path: 'account/super-secure', 
 
    component: SuperSecureComponent, 
 
    canActivate: [RoleGuard], 
 
    data: { roles: ['super-admin', 'admin'] } 
 
}];

，然后让这canActivateRoleGuard的：

canActivate(route: ActivatedRouteSnapshot, 
 
    state: RouterStateSnapshot): boolean { 
 

 
    let roles = route.data["roles"] as Array<string>; 
 
    return (roles == null || roles.indexOf("the-logged-user-role") != -1); 
 
}

我认为这可能是做这件事，而不是为每个角色创建后卫的另一种方式。因为它需要较少的代码并且很好地处理了这个问题，所以我实际上会采用这种方法。