在 Angular 2 中实施 canActivate

Question

我是 Angular 2 的新手，我正在尝试实施角色使用下面提到的代码进行基于身份验证 below.Where 我可以通过或检查特定用户是否有权访问 role.What 我在这里做错了吗？请建议

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。

可以使用ngx-permissions。或任何其他类似的图书馆。

在 Angular 2 中实施 canActivate

Implementing canActivate in Angular 2

angular2-routing

angular