Firebase 自定义声明与 Angular

如何解决Firebase 自定义声明与 Angular

我一直在为一些 firebase 身份验证概念而苦苦挣扎，但无法找到具体的解决方法。在我的 Angular 8 应用程序中，我使用 firebase 进行所有身份验证，包括使用自定义声明进行基于角色的访问。我有一个身份验证服务，可以为用户及其自定义声明提供信息：

 async getUser() {
    const u = await this.auth.currentUser;
    const level = await this.getLevel();
    return { ...u,level: level };
  }

  async getLevel():Promise<String> {
    return new Promise((resolve,reject) => {
      this.auth.currentUser.then((user) => {
        user.getIdTokenResult().then((token) => {
          console.log("Level from getLevel(): ",token.claims.level);
          if(token)
            resolve(token.claims.level);
          else
            reject({
              error: "Token error",message: "No token found"
            })
        })
      })
    })
  }

现在，当我从我的身份验证保护和导航菜单访问此功能以查看允许哪些路线以及应显示哪些导航项目时，它会在第一次登录时起作用；但是，刷新后它不再起作用，我必须登录：

导航栏：

constructor(
    private router: Router,private sidebarService: SidebarService,private activatedRoute: ActivatedRoute,private authService: AuthService
  ) {
    this.authService.getUser().then((user) => {
      this.currentUser = user;
    });
}

AuthGuard：

async canActivate(route: ActivatedRouteSnapshot,state: RouterStateSnapshot): Promise<boolean> {
    const currentUser = await this.authService.getUser();

    if (currentUser) {
      console.log("User from Guard: ",currentUser)
      if (route.data && route.data.roles) {
        if (route.data.roles.includes(currentUser.level)) {
          return true;
        } else {
          this.router.navigate(['/unauthorized']);
          return false;
        }
      } else {
        return true;
      }
    } else {
      this.router.navigate(['/user/login']);
      return false;
    }
  }

我已经知道 firebase auth 中的 currentUser 将随着时间的推移为空并填充；但是，导航组件给了我错误，“错误类型错误：无法读取 null 的属性‘级别’”，我不知道为什么？

我是否错误地使用了自定义声明？有没有更好的方法来实现我的目标？非常感谢任何帮助。