Angular 无法在CanActivate中恢复角度2路由数据
我试图找到一种方法来管理angular 2应用程序中的用户角色,而无需编写大量代码。我在网上找到了一个到目前为止效果良好的解决方案。考虑到我省略了部分设置,使其不那么混乱,不管怎么说,下面是我在模块中的@ ngMead下的设置,用于该应用程序特定部分的路由:Angular 无法在CanActivate中恢复角度2路由数据,angular,typescript,angular2-routing,Angular,Typescript,Angular2 Routing,我试图找到一种方法来管理angular 2应用程序中的用户角色,而无需编写大量代码。我在网上找到了一个到目前为止效果良好的解决方案。考虑到我省略了部分设置,使其不那么混乱,不管怎么说,下面是我在模块中的@ ngMead下的设置,用于该应用程序特定部分的路由: RouterModule.forChild([ { path: Uris.LogCall, component: LogCallComponent,
RouterModule.forChild([
{
path: Uris.LogCall,
component: LogCallComponent,
canActivate: moduleActivator,
data: { roles: ['ROLE_ADMIN','ROLE_SUPERVISOR'] }
},
{
path: Uris.ED,
component: EdComponent,
canActivate: formActivators,
data: { roles: ['ROLE_ADMIN','ROLE_SUPERVISOR'] }
},
{
path: Uris.Community,
component: CommunityComponent,
canActivate: formActivators,
data: { roles: ['ROLE_ADMIN','ROLE_SUPERVISOR'] }
},
{
path: Uris.Lab,
component: LabComponent,
canActivate: formActivators,
data: { roles: ['ROLE_ADMIN'] }
},
{
path: Uris.In,
component: InComponent,
canActivate: formActivators,
data: { roles: ['ROLE_SUPERVISOR'] }
},
{
path: Uris.Consult,
component: ConsultComponent,
canActivate: formActivators,
data: { roles: ['ROLE_ADMIN','ROLE_SUPERVISOR']}
},
{
path: Uris.BW,
component: BWComponent,
canActivate: BWActivators,
data: { roles: ['ROLE_ADMIN','ROLE_SUPERVISOR']}
resolve: { form: BWLFormResolver }
},
{
path: Uris.BWL,
component: BWLComponent,
canActivate: BWActivators,
data: { roles: ['ROLE_ADMIN','ROLE_SUPERVISOR']},
resolve: { form: BWLFormResolver }
}
])
- URI是一个具有URL静态属性的类
- CanActivate:在每种情况下,它们都指向一个常量变量,该变量包含一个包含激活器的数组
- 决心也是如此
@Injectable()
export class AuthGuardByRole implements CanActivate {
constructor(
private readonly authService: AuthService,
private readonly router: Router
) { }
canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> | boolean {
const roles = route.data['roles'] as Array<string>;
if (roles && this.authService.isAuthenticated()) {
return roles.indexOf(this.authService.User.role) !== -1;
} else {
this.router.navigate(['landing']);
}
}
}
@Injectable()
导出类AuthGuardByRole实现CanActivate{
建造师(
专用只读authService:authService,
专用只读路由器:路由器
) { }
canActivate(路由:ActivatedRouteSnapshot,状态:RouterStateSnashot):可观察的布尔值{
const roles=route.data['roles']作为数组;
if(角色&&this.authService.isAuthenticated()){
返回roles.indexOf(this.authService.User.role)!=-1;
}否则{
这个.router.navigate(['landing']);
}
}
}
这对所有人都有效,直到我添加了resolve,即使resolve工作正常,但在最后2种存在resolve的情况下,最后一段代码中的roles变量始终未定义。但是对于其余的URL(没有解析),它工作得非常完美,角色总是有效的。我提到决心是因为我认为这可能是原因,我不确定是否诚实
解析器
@Injectable()
export class BWListFormResolver implements Resolve<BWListForm> {
constructor(private readonly service: LogService) { }
resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<BWListForm> {
const id = Number(route.paramMap.get('id'));
return this.service.getBWList(id);
}
}
@Injectable()
导出类BWListFormResolver实现解析{
构造函数(私有只读服务:LogService){}
解析(路由:ActivatedRouteSnapshot,状态:RouterStateSnashot):可观察{
const id=Number(route.paramMap.get('id');
返回此.service.getBWList(id);
}
}
我阅读了文档,根据我的理解,我应该在数据属性中接收该值。有什么想法吗?因为我已经在文档中对它进行了大量的研究,做了一些测试,但没有提出替代方案
我将非常感谢您的帮助
提前感谢,
路易斯。如果这是你所说的,那么这似乎是一个有角度的错误
resolve
将其结果也放置在数据对象中(data['form']
),但在您的情况下,它似乎会覆盖它。我会看看是否能复制你的angular版本,你能发布你的解析的代码吗?@PierreDuc,谢谢你的回复,我使用的是angular 4.0.0/typescript“:2.2.2,就解决方案而言,它工作正常,没有问题。让我看看我是否可以把代码放在这里。请编辑你的问题,添加适当的代码部分,它比评论中更可读。你是对的@Myonara,这是我的错。谢谢你让我知道。如果这是你说的,那么它似乎是一个有角度的错误resolve
将其结果也放置在数据对象中(data['form']
),但在您的情况下,它似乎会覆盖它。我会看看是否能复制你的angular版本,你能发布你的解析的代码吗?@PierreDuc,谢谢你的回复,我使用的是angular 4.0.0/typescript“:2.2.2,就解决方案而言,它工作正常,没有问题。让我看看我是否可以把代码放在这里。请编辑你的问题,添加适当的代码部分,它比评论中更可读。你是对的@Myonara,这是我的错。谢谢你让我知道。