3

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

这就是我试图做到这一点的方式：

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;
    })
}

订阅中的逻辑有效，因为我已经像这样测试过它（这基本上取自谷歌的 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，这需要调用 API。我接近这一切都错了吗？我是否应该在登录时返回用户角色并将每个路由的角色存储在前端，这样我就可以在不打电话的情况下进行检查？还有其他方法可以解决我缺少的问题吗？

4

2 回答 2

3

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

于 2016-12-23T22:04:09.343 回答
0

试试这样：

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);
            }
        );
    });
}
于 2019-12-19T13:50:00.957 回答