Question

我在angular7 Route Guards服务中使用httpclient时遇到问题。因为我必须从后台服务器获取结果来判断是否通过。但是httpclient服务是异步的，所以变量canPass总是为false，该如何处理？任何意见将不胜感激。这是我的代码：

judgePass(route: string): Observable<CommonResult> {
const url = `${this.baseUrl}/check`;
const formData = new FormData();
formData.append('url', route);
return this.httpClient.post<CommonResult>(url, formData, {});
}

canPass: boolean = false;

canActivate(route: ActivatedRouteSnapshot, state: 
    RouterStateSnapshot):boolean {
    this.authService.judgePass(state.url).subscribe(res => {
        let code = res['code'];
        if (code == 0) {
            this.canPass = true;
        } else {
            this.message.create('error', res.message);
            this.canPass = false;
        }
    });
    return this.canPass;
}

Answer 1

您的代码不起作用，因为您没有等待返回值，而在尚未分配其值的情况下立即返回this.canPass。

如您所见in the Angular docs，您可以完美地返回一个可观察值。

只需返回可观察对象，如：

canActivate(route: ActivatedRouteSnapshot, state: 
    RouterStateSnapshot): Observable<boolean> {
    return this.authService.judgePass(state.url).pipe(map(res => {
        let code = res['code'];
        if (code == 0) {
            return true;
        } else {
            this.message.create('error', res.message);
            return false;
        }
    }));
}

pipe / map的作用只是跳入可观察范围，并将结果更改为true/false。

还有其他方法，其中像this SO post一样使用async/await，尽管我更喜欢上面的解决方案。

angular7路由卫士和同步http订阅

1 个答案: