Angular 无法在CanActivate中恢复角度2路由数据

Angular 无法在CanActivate中恢复角度2路由数据,angular,typescript,angular2-routing,Angular,Typescript,Angular2 Routing,我试图找到一种方法来管理angular 2应用程序中的用户角色,而无需编写大量代码。我在网上找到了一个到目前为止效果良好的解决方案。考虑到我省略了部分设置,使其不那么混乱,不管怎么说,下面是我在模块中的@ ngMead下的设置,用于该应用程序特定部分的路由: RouterModule.forChild([ { path: Uris.LogCall, component: LogCallComponent,

我试图找到一种方法来管理angular 2应用程序中的用户角色,而无需编写大量代码。我在网上找到了一个到目前为止效果良好的解决方案。考虑到我省略了部分设置,使其不那么混乱,不管怎么说,下面是我在模块中的@ ngMead下的设置,用于该应用程序特定部分的路由:

 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:在每种情况下,它们都指向一个常量变量,该变量包含一个包含激活器的数组
  • 决心也是如此
以下是负责验证角色的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,这是我的错。谢谢你让我知道。