canActivateをAngular 2で実装する

Question

私はAngular 2を初めて使用しています。私は以下のコードでロール ベースの認証を実装しようとしています。特定のユーザーがそのロールへのアクセス権を持っていますか？ここで間違っている？

app.module.ts

const appRoutes: Routes = [ 
    { path: '', component: LoginComponent }, 
    { path: 'main', component: MainComponent } 
]; 

const appChildRoutes: Routes = [ 
    { 
    path: 'main', component: MainComponent, 
    canActivateChild: [RoleGuard], 
    children: [ 
     { 
     path: 'charts', component: ChartsComponent, canActivateChild: [RoleGuard], 
     data: { roles: ['user', 'admin'] } 
     }, 
     { path: 'overview', component: OverviewComponent, canActivateChild: [RoleGuard], 
     data: { roles: ['user', 'admin'] } }, 
     { path: 'demand', component: DemandComponent, canActivateChild: [RoleGuard], 
     data: { roles: ['user', 'admin'] } }, 
     { path: 'analysis', component: AnalysisComponent, canActivateChild: [RoleGuard], 
     data: { roles: ['user', 'admin'] } }, 
     { path: 'approval', component: ApprovalComponent, canActivateChild: [RoleGuard], 
     data: { roles: ['user', 'admin'] } }, 
     { path: 'demand/:demand', component: DemandComponent, canActivateChild: [RoleGuard], 
     data: { roles: ['user', 'admin'] } } 
    ] 
    } 
] 

roleguard.ts

export class RoleGuard implements CanActivate,CanActivateChild{ 


    canActivate(route: ActivatedRouteSnapshot, 
    state: RouterStateSnapshot): boolean { 
    console.log("*******************Can Activate Called*************************"); 

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

     canActivateChild(route: ActivatedRouteSnapshot, 
    state: RouterStateSnapshot): boolean { 
     console.log("********************Can Activate Child Called**********************"); 

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


} 

Answer 1

を提案してください私は、ルータの役割権限を持つPlunkerチェック作成しました。

const appRoutes: Routes = [ 
{ path: '', component: LoginComponent }, 
    { path: 'main', component: MainComponent } 
]; 

const appChildRoutes: Routes = [ 
{ 
path: 'main', component: MainComponent, 
canActivateChild: [RoleGuard], 
children: [ 
    { 
    path: 'charts', component: ChartsComponent, canActivateChild: [RoleGuard], 
    data: { roles: ['user', 'admin'] } 
    }, 
    { path: 'overview', component: OverviewComponent, canActivateChild: [RoleGuard], 
    data: { roles: ['user', 'admin'] } }, 
    { path: 'demand', component: DemandComponent, canActivateChild: [RoleGuard], 
    data: { roles: ['user', 'admin'] } }, 
    { path: 'analysis', component: AnalysisComponent, canActivateChild: [RoleGuard], 
    data: { roles: ['user', 'admin'] } }, 
    { path: 'approval', component: ApprovalComponent, canActivateChild: [RoleGuard], 
    data: { roles: ['user', 'admin'] } }, 
    { path: 'demand/:demand', component: DemandComponent, canActivateChild: [RoleGuard], 
    data: { roles: ['user', 'admin'] } } 
    ] 
    } 
    ] 

path: 'main', component: MainComponent, canActivate: [RoleGuard], 
data: { roles: ['user', 'admin'] } }, 
    children: [ 
    { 
    path: 'charts', component: ChartsComponent, 
    }, 
    { path: 'overview', component: OverviewComponent, 
    }, 
    { path: 'demand', component: DemandComponent, 
    }, 
    { path: 'analysis', component: AnalysisComponent, 
    }, 
    { path: 'approval', component: ApprovalComponent, 
    }, 
    { path: 'demand/:demand', component: DemandComponent, 
    } } 
    ] 
    } 
    ] 

に、子ルート内のすべてのCanActivateChildを削除します。

1. 私は変化するであろう。

2. ngx-permissionsを使用できます。または他の同様のライブラリ。