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。

您可以使用ngx-permissions。或任何其他类似的库。

在Angular 2中实现canActivate

1 个答案: