Question

在我的身份验证服务中，我有一个可观察到的user，它是从Firebase后端填充的。

我还有一个方法可以接收用户对象，如果用户具有传入的角色，则返回一个布尔值。

在我的模板中，有些元素仅在登录用户具有admin角色（例如，列为其角色之一）时才显示。我需要它具有这样的功能，以便最终可以使用is（'contributor'）等，并且仍然返回布尔值。

现在，当我尝试对其进行测试时，浏览器将挂起并最终崩溃。我该如何进行设置，以便在用户角色符合要求时以及何时满足用户要求，隐藏div直到数据解析？

// authService

  this.user = this.afAuth.authState.pipe(
    switchMap(user => {
      if (user) {
        return this.afs.doc<User>(`users/${user.uid}`).valueChanges()
      } else {
        return of(null)
      }
    })
  )

is(role){
    let p = Promise

    this.user.toPromise().then(resolvedUserData=>{
    (_.has(role, resolvedUserData.roles)) ? p.resolve() : p.reject(); 
   })

   return p;
  }


 //template

 <div *ngIf="authService.is('admin') | async">admin content here</div>

Answer 1

您的函数正在返回一个Promise，并且异步管道需要一个可观察的

// AuthService

isAdmin = false;

this.user = this.afAuth.authState.pipe(
switchMap(user => {

  if( check if use is admin){
      this.isAdmin = true;
  }
})

）

//模板

 <div *ngIf="authService.isAdmin">admin content here</div>

现在，从安全的角度来看，我不确定这是最好的方法。我会有其他种类的验证或令牌。但是这种方法可以满足您的要求。干杯。

如何根据用户角色隐藏内容？

1 个答案: