Angular：RouterGuards、HTTP 请求和竞争条件答案

【问题标题】：Angular: RouterGuards, HTTP requests and race conditionsAngular：RouterGuards、HTTP 请求和竞争条件
【发布时间】：2022-11-18 18:25:50
【问题描述】：

我正在尝试在 Angular 中创建一个 RouterGuard，它从后端获取有关用户登录状态的响应。问题在于 HTTP 请求返回具有异步具体值的订阅。我如何保证 Router 将“等待”http 调用转换为实际值然后进行处理？

已经登录的 RouterGuard：

export class AlreadyAuthIn implements CanActivate {
  constructor(private clientService: ClientService,
              private router: Router) {  }
  canActivate(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {

return this.clientService.isUserLogged()
  .subscribe(
    (response: Response) => {
      let loginStatus = response.message;
      if (loginStatus == 'not_logged') {
        localStorage.clear();
        return false;
      } else {
        return true;
      }
    });
}

注意：clientService.isUserLogged() 是 http 调用，将返回一个 Observable。

此代码已显示一个错误，说明不应返回订阅。然后我尝试将逻辑分配给一个变量，例如：

let logged = this.clientService.isUserLogged().subscribe(...<logic>......)
if (logged) {
  return false;
} else {
  return true;
}

但这会产生一个新问题：竞争条件。在 Subscription 变成布尔值之前检查 If 语句。也许我们可以用 Promise 解决这个问题？

【问题讨论】：

标签： angular angular-promise angular-httpclient angular-observable angular-router-guards

【解决方案1】：

您现在返回的订阅不是您请求的结果。使用 map 函数将请求的返回类型转换为 Observable<boolean>，angular 将使用它来处理路由守卫。

尝试类似的东西（未经测试）

export class AlreadyAuthIn implements CanActivate {
  constructor(private clientService: ClientService,
              private router: Router) {  }
  canActivate(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {

return this.clientService.isUserLogged()
  .pipe(map((response: Response) => {
      let loginStatus = response.message;
      if (loginStatus == 'not_logged') {
        localStorage.clear();
        return false;
      } else {
        return true;
      }
    });
}

【讨论】：