Angular Firebase：访问字段映射以进行身份验证

Question

我有一个 firebase 用户集合 > 文档 ID > uid，...，和角色 { admin: boolean, moderator: boolean, client: boolean }。我的身份验证过程与守卫根据需要重定向一起正常工作。更重要的是，我在我的用户仪表板中的适用组件中显示了 90% 的数据。

问题是，当我在组件中使用 ngIf 引用 {{ user.roles.admin }} 时，出现错误：

ERROR TypeError: Cannot read property 'admin' of undefined at Object.eval [as updateRenderer]

有趣的是，我无法通过使用代码来尝试获取信息来解决这两个问题，但我可以调整并将我想要的任何内容发送回 Firebase。我需要有人为我指明正确的方向。

型号：

export interface User {
  uid: string;
  email: string;
  photoURL?: string;
  displayName?: string;
  roles: Roles;
}

export interface Roles {
  admin?: boolean;
  moderator?: boolean;
  client?: boolean; 
}

授权服务：

import { Injectable, NgZone } from '@angular/core';
import { User } from "../../models/user/user";
import { auth } from 'firebase/app';
import { AngularFireAuth } from "@angular/fire/auth";
import { AngularFirestore, AngularFirestoreDocument } from '@angular/fire/firestore';
import { Router } from "@angular/router";
@Injectable({
  providedIn: 'root'
})
export class AuthService {
  userData: any; 
  constructor(
    public afs: AngularFirestore,   
    public afAuth: AngularFireAuth, 
    public router: Router,  
    public ngZone: NgZone 
  ) {    
    this.afAuth.authState.subscribe(user => {
      if (user) {
        this.userData = user;
        localStorage.setItem('user', JSON.stringify(this.userData));
        JSON.parse(localStorage.getItem('user'));
      } else {
        localStorage.setItem('user', null);
        JSON.parse(localStorage.getItem('user'));
      }
    })
  }
  SignIn(email, password) {
    return this.afAuth.auth.signInWithEmailAndPassword(email, password)
      .then((result) => {
        this.ngZone.run(() => {
          this.router.navigate(['account']);
        });
        this.SetUserData(result.user);
      }).catch((error) => {
        window.alert(error.message)
      })
  }
  ...
  ...
  ...
  get isLoggedIn(): boolean {
    const user = JSON.parse(localStorage.getItem('user'));
    return (user !== null && user.emailVerified !== false) ? true : false;
  }
  ...
  AuthLogin(provider) {
    return this.afAuth.auth.signInWithPopup(provider)
    .then((result) => {
       this.ngZone.run(() => {
          this.router.navigate(['account']);
        })
      console.log('User', result.user);
      this.SetUserData(result.user);
    }).catch((error) => {
      window.alert(error)
    })
  }
  SetUserData(user) {
    const userRef: AngularFirestoreDocument<any> = this.afs.doc(`users/${user.uid}`);
    const userData: User = {
      uid: user.uid,
      email: user.email,
      displayName: user.displayName,
      photoURL: user.photoURL,
      roles: {
        client: true
      }
    }
    return userRef.set(userData, {
      merge: true
    })
  }
  ...
}

Answer 1

这是我在组件 html:

中检查用户的方式

*ngIf="user && user.role?.admin"

打字稿：

getUser() {
 this.authService.user$.subscribe(user => {this.user = user});
}

这是来自授权服务：

  user$: Observable<User>;
  authState: any = null;

  constructor (
    private afAuth: AngularFireAuth,
    private afs: AngularFirestore) {

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

Angular Firebase：访问字段映射以进行身份验证

Angular Firebase: Accessing field maps for authentication

document

firebase

firebase-authentication

angular

Angular Firebase：访问字段映射以进行身份​​验证

Angular Firebase: Accessing field maps for authentication

document

firebase

firebase-authentication

angular

Angular Firebase：访问字段映射以进行身份验证