Question

我正在使用具有身份验证和Firestore的Firebase。经过身份验证的用户在注册时会通过其他角色字段存储在数据库中，其中某些用户具有“管理员”角色。我想保护管理路由，并且使用canActivate路由防护。在canActivate函数中，我使用2个可观察值。前一个获取登录用户并嵌套在另一个可观察对象中，该可观察对象从firestore获取已保存的用户，无论登录用户是否为admin，都从那里使用该信息。问题在于，当浏览器在浏览器中刷新路由类型后刷新浏览器，但使用按钮上的routerlink调用路由时，则路由保护器工作正常。

尝试使用同步值，但这些值仅工作一次，并在浏览后停止工作。

canActivate函数： https://i.imgur.com/Rf0BZ79.png

canActivate(router: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {

    return this.afAuth.getStateOnly().pipe(switchMap(user => { return this.db.getRole(user.uid) }))

  }

使用的可观察物： https://i.imgur.com/hRp8zyf.png https://i.imgur.com/oV56AGl.png

//用户对象或firebase中的null

 getStateOnly() {
    return this.afAuth.authState 
  }

//检查角色并返回true或false（userArr是可观察到的用户数组，可以从firestore中存储用户）

getRole(uid: string): Observable<boolean> {
    return this.userArr.pipe(map(users => {
      return users.filter(user => {
        if (user.uid === uid) {
          return user
        }
      })[0].roles.includes('admin')
    }))

因此，这仅在我在浏览器中键入路径并且加载路由时浏览器刷新时才有效。当我单击“管理”按钮导航到管理页面（不适用于routerLink或router.navigate（..））时，它不起作用

Answer 1

image of new canActivate() 我已经设法解决了这个问题，但是我仍然不确定为什么以前的实现无法正常工作。因此，我创建了一个新的可观察对象，该对象可从firestore中获取用户，并且我正在使用can Activate函数直接转换该输出，请参见图像。以前，我获得了用户，对其进行了转换，然后从canactivate函数调用转换为observable的方法似乎无效。因此，数据流出了问题。

使用switchmap运算符的canActivate嵌套可观察对象的routeguard仅在浏览器中有效

1 个答案: