각도 2로 canActivate 구현

Question

저는 Angular 2에 익숙하지 않고 아래에 언급 된대로 다음 코드를 사용하여 기반 인증을 구현하려고합니다. 특정 사용자가 해당 역할에 액세스 할 수 있는지 확인할 수 있습니까? 여기 잘못있는거야?

이

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

을 app.module.ts 제안하십시오 나는 라우터 역할 권한 검사와 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을 사용할 수 있습니다. 또는 다른 유사한 라이브러리.