angular - 为什么不能在 canActivate 方法的 catch 块中返回 Observable.of(false)？

问题描述

我使用 canActivate 功能来保护一些路由（管理员）。对于这种情况，我确实使用了authGuard类/函数：

问题是，当我尝试将 boolean 的可观察值返回为:return Observable.of(false);时，它无法按预期工作并引发以下错误：

'(err: any) => Observable | 类型的参数 Observable' 不能分配给类型为“（错误：任何，捕获：Observable）=> ObservableInput”的参数。输入“可观察 | Observable' 不可分配给类型 'ObservableInput'。类型“Observable”不可分配给类型“ObservableInput”。类型“Observable”不可分配给类型“ArrayLike”。“可观察”类型中缺少属性“长度”。

我一直在搜索并发现这种问题，但不完全相同。并且提供的提示/解决方案是使用.throw(err);

当我将 return 更改为:return Observable.throw(err);时，错误消失了，但为了保护我的路线，它没有false按应有的方式返回。

我相信这是一个类型问题等，但我无法修复它，所以我不断返回observable.of(false)

canActivate( next: ActivatedRouteSnapshot, state: RouterStateSnapshot ): Observable<boolean> | Promise<boolean> | boolean {
        return this.userService.getAdminAuth()
        .map( (res) => {
            if ( res === true) {
                return true;
            } else {
                ......
                return false;
            }
        })
        .catch( (err) => {
            if ( err.status === 403 ) {
                console.log(`403:  ${err.status}`);
                return this.userService.refreshToken()
                    .map( (res) => {
                        console.log(`Res RefreshToken: ${res}`);
                    });
            }
            return Observable.of(false); // protect route!
        });
}

user.service.ts中的函数：

....

isAdminAuthenticated = false;

public getAdminAuth() {
    console.log('Saved token: ' + localStorage.getItem('ac_token') );
    if ( this.isAdminAuthenticated === true ) {
        return Observable.of(true);
    } else {
        return this.http.get(
           'URL', { 
              headers: new HttpHeaders({"Accept": "application/json"}), 
              withCredentials: true, 
              observe: "response" 
           }
        )
        .map((res) => {
            if (res.status === 200) {
                this.isAdminAuthenticated = true;
                return true;
            } else {
                return false;
            }
        }, (err) => {
            console.log('Error: ' + err);
            return false;
        });
    }
}


refreshToken() {
    return this.http.get(
        'URL', 
        { 
            headers: new HttpHeaders(
                {
                    "Accept": "application/json",
                    "Authorization" : "Bearer " + localStorage.getItem('ac_token')
                }
            ), 
            withCredentials: true, 
            observe: "response" 
        }
    )
}

另一方面，如果我将refreshToken功能更改为：

refreshToken() {
        return this._http.get(
            'URL', 
            { 
                headers: new HttpHeaders(
                    {
                        "Accept": "application/json",
                        "Authorization" : "Bearer " + localStorage.getItem('ac_token')
                    }
                ), 
                withCredentials: true, 
                observe: "response" 
            }
        ).map( (res) => {
            console.log(`Res: ${JSON.stringify(res)}` );
        }), (err) => {
            console.log(`Err: ${JSON.stringify(err)}` );
        };
}

然后错误说：

src/app/admin.guard.ts(38,9) 中的错误：错误 TS2322：类型 'Observable' 不可分配给类型 'boolean | 承诺 | 可观察”。类型“Observable”不可分配给类型“Observable”。输入'布尔| {}' 不可分配给类型 'boolean'。类型“{}”不可分配给类型“布尔”。src/app/service.guard.ts: 错误 TS2339: 属性 'map' 不存在于类型 '(err: any) => boolean' 上。

标签： angulartypescriptauth-guard

angular - 为什么不能在 canActivate 方法的 catch 块中返回 Observable.of(false)？

问题描述

解决方案

推荐阅读