在 Angular 2 AuthGuard 中添加对 canActivate 的 API 调用

Question

我正在为 Angular 2 应用程序中的路由设置 AuthGuard。每条路线都有不同的用户组可以去那条路线。在前端，我只存储一个不记名令牌，所以当调用 canActivate 时，我想调用一个 API，发送我的令牌和路由，让 API 解决该用户是否具有访问权限到那条路线，如果他们这样做，return 为真，否则 return 为假。在前端，我想使用该调用的结果来路由它们或将它们发送回登录屏幕。

这就是我试图实现的方式：

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 必须 return 是真还是假，而我只是在订阅中 return 是真还是假。问题是我只想在路由身份验证发生后 return 为真或假，这需要调用 API。我接近这一切都错了吗？我是否应该在登录时只 return 用户角色并将每个路由的角色存储在前端，这样我就可以在不调用的情况下进行检查？还有其他方法可以解决我所缺少的问题吗？

Answer 1

假设您的服务器return有一个过期的令牌并且有一些作用。你只需要在你的守卫中检查这些。所以只需将它们存储在您的本地存储或会话存储中。对于每个服务器调用，您应该提供令牌，因此如果有人篡改本地存储，您的服务器应该给出错误。这样，用户可能 "hack" 进入他们不应该进入的路由，但您的服务器根本不会 return 任何数据，因为令牌无效。

Answer 2

这样试试：

canActivate(): Observable<boolean> | Promise<boolean> | boolean {
    return new Promise(res => {
        this.authService.authenticateRouteForUser(state.url).subscribe(
            (active ) => {
                if (active) {
                    res(true);
                } else {
                    this.router.navigate(['/login-page']);
                    res(false);
                }
            },
            (error) => {
                this.router.navigate(['/login-page']);
                res(false);
            }
        );
    });
}

在 Angular 2 AuthGuard 中添加对 canActivate 的 API 调用

Adding an API call to canActivate in Angular 2 AuthGuard

angular

typescript

angular2-observables