Angular 如何将 await 与 .subscribe 结合使用

Question

我目前正在构建一个路由守卫，用于检查我的客户端是否已通过身份验证。因为我只使用 http cookie，所以我必须向我的服务器发送一个请求，然后 returns 如果 cookie 有效或无效。这是我的守卫代码：

export class AuthGuard implements CanActivate {
  constructor (private auth: AuthService){}
  
  async canActivate(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Promise<boolean> {

      let isAuthenticated : boolean = false;
      
      await this.auth.getAuthStatus().subscribe(
        res => {
          if(res.status == 200){
            isAuthenticated = true;
          }
      })
      console.log(isAuthenticated)
      return isAuthenticated;
  }
}

服务只是一个简单的 http 调用：

  getAuthStatus(): Observable<HttpResponse<any>>{
    return this.http.post(environment.server + environment.routes.authRoutes.status, "", {
      withCredentials: true,
      observe: 'response'
    })
  }

我面临的问题是我的守卫必须 return 路由器的布尔值，并且因为我正在使用 .subscribe 它 returns false 因为它 returns siAuthenticated 在我 .subscribe 完成之前。我尝试添加 await 和 returning 一个承诺，但它在我的情况下不起作用，或者我没有正确使用它。我尝试在不同的帖子中找到解决方案，但 none 对我有用（或者我只是没有正确理解它们并以错误的方式实施它们）。

谢谢

Answer 1

await 需要一个 Promise 所以你可以使用 Observable 的 toPromise() 方法并改变 getAuthStatus() 的 return 类型。

但是正如@ShamPooSham 在评论中提到的，我还建议 returning Observable 而不是来自守卫的 Promise。

getAuthStatus(): Promise<HttpResponse<any>>{
    return this.http.post(environment.server + environment.routes.authRoutes.status, "", {
      withCredentials: true,
      observe: 'response'
    }).toPromise()
  }


await this.auth.getAuthStatus().then(res => {...})

Answer 2

对于较新的 RxJS 版本，您可以编写

const response = await lastValueFrom(this.auth.getAuthStatus());

以及年龄较大的

const response = await this.auth.getAuthStatus().toPromise();

Angular 如何将 await 与 .subscribe 结合使用

Angular how do I use await with .subscribe

rxjs

angular

angular-guards