Angular Firestore Admin Router Guard答案

【问题标题】：Angular Firestore Admin Router GuardAngular Firestore Admin Router Guard
【发布时间】：2019-12-14 16:32:43
【问题描述】：

我试图阻止普通用户访问我的应用的管理端。目前，Firestore 文档上的 admin 属性为 true 或 false。如果为 false，则在尝试访问 admin 端时应将它们重定向到主页，否则，允许 ADMIN 继续访问该页面。

我该怎么办？

这是我的 admin-auth-guard.service.ts

  userDoc: AngularFirestoreDocument<User>;
  user: Observable<User>;

  constructor(private afAuth: AngularFireAuth,
              private afs: AngularFirestore,
              private router: Router) {}

  canActivate() {
    this.userDoc = this.afs.doc('users/' + this.afAuth.auth.currentUser.uid);
    this.user = this.userDoc.valueChanges();
    return this.user.map(role => {
      if (role.admin)
          return true
        this.router.navigate(['/']);
          return false;        
    });
  }

我相信代码会起作用，但在初始化 Admin Auth Guard 时，请求发生得太快并且 uid 为空。

我收到此错误：

ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'uid' of null

TypeError: Cannot read property 'uid' of null

当我将 admin 变量存储在文档中时，如何检查用户是否为管理员？

【问题讨论】：

标签： angular firebase google-cloud-firestore firebase-authentication

【解决方案1】：

改为收听authState 并使用switchMap 更改为内部可观察对象。还要在您的查询中添加take(1)，我们不想让订阅保持开放状态。此外，我假设您使用的是带有可管道运算符的 rxjs 版本。如果没有，则使用.map、.switchMap 和.take，而不是在pipe() 内。

所以尝试以下方法：

import { of } from 'rxjs';
import { map, take, switchMap } from 'rxjs/operators';

// ...

canActivate() {
  return this.afAuth.authState.pipe(
    take(1),
    switchMap(user => {
      // check if user is even logged in
      if (user) {
        return this.afs.doc('users/' + user.uid).valueChanges().pipe(take(1))
      }
      return of(null);
    }),
    map((role) => {
      if (role.admin) {
        return true;
      }
      this.router.navigate(['/']);
      return false;        
    })
  )
}

【讨论】：