Question

我正在为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。我接近这一切都错了吗？我应该在登录时返回用户角色并在前端存储每条路由的角色，这样我可以在不打电话的情况下检查它吗？是否还有其他方法可以解决这个问题？

Answer 1

假设您的服务器返回一个过期且具有某些角色的令牌。你只需要在警卫中检查这些。因此，只需将它们存储在localstorage或sessionstorage中。对于每个服务器调用，您应该提供令牌，因此如果有人篡改本地存储，您的服务器应该给出错误。这样用户就可以“破解”＃34;进入他们不应该的路线，但是你的服务器根本不会返回任何数据，因为令牌无效。

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调用

2 个答案: