Angular如何在.subscribe中使用await ?

Question

我目前正在构建一个路由保护，检查我的客户端是否经过身份验证。因为我只使用http cookie，所以我必须向服务器发送请求，然后返回cookie是否有效。这是my guard的代码:

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

我面临的问题是，我的警卫必须为路由器返回一个布尔值，并且由于我使用。subscribe，它返回false，因为它在我。subscribe完成之前返回siAuthenticated。我尝试添加等待并返回一个承诺，但它在我的情况下不起作用，或者我没有正确使用它。我试着在不同的帖子中找到解决方案，但没有一个适合我(或者我只是没有正确理解它们并以错误的方式实现它们)。

谢谢

Answer 1

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

但是正如@ shamposham在评论中提到的，我也建议从守卫返回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();