我正在为Angular 2应用程序中的路由设置AuthGuard . 每条路由都有不同的用户组，可以转到该路由 . 在前端我只存储一个承载令牌，所以当调用canActivate时我想调用一个API，发送我的令牌和路由，让API解析该用户是否有权访问该路由，如果他们这样做，返回true，否则返回false . 在前端，我想使用该调用的结果来路由它们或者只是将它们发送回登录屏幕 .
这就是我想要实现的目标：
canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
this.authService.authenticateRouteForUser(state.url).subscribe(active => {
if (active) {
return true;
}
this.authService.redirectUrl = state.url;
this.router.navigate(['/login-page'])
return false;
})
}
订阅中的逻辑是有效的，因为我已经像这样测试了它（这基本上是从Google的Angular文档中获得的）：
canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean{
console.log('AuthGuard#canActivate called')
if(this.authService.isLoggedIn){
return true;
}
this.authService.redirectUrl = state.url;
this.router.navigate(['/login-page'])
return false;
}
我知道我的第一个语句的问题是canActivate必须返回true或false，我只在订阅中返回true或false . 问题是我只想在路由认证发生后返回true或false，这需要调用API . 我接近这一切都错了吗？我应该在登录时返回用户角色并在前端存储每条路由的角色，这样我就可以在不打电话的情况下检查它吗？还有其他方法可以解决这个问题吗？
1 回答
假设您的服务器返回一个到期且具有某些角色的令牌 . 你只需要在警卫中检查这些 . 因此，只需将它们存储在localstorage或sessionstorage中 . 对于每个服务器调用，您应该提供令牌，因此如果有人篡改本地存储，您的服务器应该给出错误 . 这样，用户可能会“入侵”他们不应该的路由，但是服务器根本不会返回任何数据，因为令牌无效 .