Angular AuthGuard canActivate with observable from Promise 不工作

Question

我正在嘗試保護 Angular 中的管理面板，以便只有管理員用戶才能訪問它。 在創建管理員 AuthGuard 時，我遇到了一個問題，當邏輯比“用戶是否登錄？”稍微復雜一點時，AuthGuard 似乎不起作用。

我得到一個空的白色屏幕，而不是預期的重定向。

在過去的幾個小時里，我一直在努力尋找根本原因，但它似乎卡在了這一行： const user = await this.firebaseAuth.user.toPromise(); 但我不明白為什么。

有人能指引我走向正確的方向，因為我似乎迷失在 Angular 和 Observables 的叢林中嗎？

AuthGuard canActivate 方法：

canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): Observable<boolean> {
    return this.accountDataService.userIsAdmin().pipe(
      take(1),
      map((admin) => {
        console.log(admin);

        if (admin) {
          return true;
        }

        this.router.navigate(['/aanmelden']);
        return false;
      })
    );
  }

這是數據服務：

userIsAdmin(): Observable<boolean> {
    return from(
      new Promise<boolean>(async (resolve) => {
        const user = await this.firebaseAuth.user.toPromise();

        if (user === undefined) {
          resolve(false);
        }

        const result = await user.getIdTokenResult();
        const admin = result.claims.admin;

        if (admin === undefined || admin === null || admin === false) {
          resolve(false);
        }

        resolve(true);
      })
    );
  }

Answer 1

我猜this.firebaseAuth.user沒有完成。 toPromise僅在 observable 完成時解析。

您應該重寫userIsAdmin函數以僅使用 observable。

userIsAdmin(): Observable<boolean> {
  return this.firebaseAuth.user.pipe(
    switchMap(user => {
      if (user === undefined || user === null) {
        return of(false);
      }

      return from(user.getIdTokenResult()).pipe(
        map(result => {
          const admin = result.claims.admin;

          if (admin === undefined || admin === null || admin === false) {
            return false;
          }

          return true;
        })
      )
    })
  );
}

Answer 2

observable 需要完成。 最后我在.take(1)上取得了更大的成功。 這將解釋為什么Observable.of(true)起作用。 嘗試這個：

canActivate(): Observable<boolean> {
  return this.auth.map(authState => {
    if (!authState) this.router.navigate(['/aanmelden']);
    console.log('activate?', !!authState);
    return !!authState;
  }).take(1)
}