在 Angular 2 AuthGuard 中添加對 canActivate 的 API 調用

Question

我正在為 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。 我這樣做是錯的嗎？ 我是否應該只在登錄時返回用戶角色並將每個路由的角色存儲在前端，這樣我就可以在不打電話的情況下進行檢查？ 有沒有其他方法可以解決我缺少的問題？

Answer 1

假設您的服務器返回一個過期並具有某些角色的令牌。 你只需要在你的警衛中檢查這些。 因此，只需將它們存儲在您的本地存儲或會話存儲中。 對於每個服務器調用，您應該提供令牌，因此如果有人篡改了 localstorage，您的服務器應該會出錯。 這樣用戶可能會“入侵”他們不應該進入的路線，但您的服務器根本不會返回任何數據，因為令牌無效。

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