angular7路由保护和同步http订阅[重复]

Question

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

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，您完全可以返回一个可观察对象。

只需返回 observable，如下所示：

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 的东西只是跳入 observable 并将结果更改为 true/false。

还有其他方法，其中使用async/await，如this SO post，虽然我更喜欢上面的解决方案。