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

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

Answer 2

我想 this.firebaseAuth.user 没有完成。 toPromise 仅在可观察对象完成时解析。

您应该重写 userIsAdmin 函数以仅使用 observables。

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

Angular AuthGuard canActivate with observable from promise 不工作

Angular AuthGuard canActivate with observable from promise not working

rxjs

angular

auth-guard