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