Question

我正在firebase中建立一个自定义的用户数据库，其中将使用用户身份验证uid存储文档ID。

我当前面临的问题是存储当前用户文档，以便在用户登录时显示在我的仪表板上。

当前，在我的authService.ts上，我正在存储firebase.user中的数据它在我的仪表板上将仅显示默认数组中的信息。这就是我的auth.service.ts

export class AuthService {
  userData: any; 
  userCollection: AngularFirestoreCollection<User>;
  constructor(

    public afs: AngularFirestore,   // Inject Firestore service
    public afAuth: AngularFireAuth, // Inject Firebase auth service
    public router: Router,  
    public ngZone: NgZone, // NgZone service to remove outside scope warning

  ) {    
    /* Saving user data in localstorage when 
    logged in and setting up null when logged out */
    this.afAuth.authState.subscribe(user => {
      if (user) {
        this.userData = user;
        localStorage.setItem('user', JSON.stringify(this.userData));
        JSON.parse(localStorage.getItem('user'));
        this.UserID = this.userData.uid;
      } else {
        localStorage.setItem('user', null);
        JSON.parse(localStorage.getItem('user'));
      }
    })
  }

  SignUp(username, email, password) {
    return this.afAuth.auth.createUserWithEmailAndPassword(email, password)
      .then((result) => {
        // set account  doc 
          let created_data = JSON.parse(JSON.stringify(result.user));
          const account = {
          uid: result.user.uid,
          created_time: created_data.createdAt,
          email:  result.user.email,
          display_name: username,
          photoURL: result.user.photoURL,
        }
        this.SetUserData(account);
      }).catch((error) => {
        window.alert(error.message)
      })
  }

  /* Setting up user data when sign in with username/password, 
  sign up with username/password and sign in with social auth  
  provider in Firestore database using AngularFirestore + AngularFirestoreDocument service */
  SetUserData(user) {
    const userRef: AngularFirestoreDocument<User> = this.afs.doc(`users/${user.uid}`);
    const userData: User = {
      bio: null,
      country: {
        country: null,
        country_code:null,
        symbol:null
      },
      gender: "unspecified",
      languages: null,
      profile_pic: user.photoURL,
      username: user.display_name,
    }
    return userRef.set(userData, { 
      merge: true
    })
  }
}

和我的dashboard.component.ts

export class DashboardComponent implements OnInit {

  isLoggedIn$: Observable<boolean>;
  isLoggedOut$:Observable<boolean>;

  constructor(
    public afAuth: AngularFireAuth,
    public authService: AuthService
    ) { }

  ngOnInit() {
    this.isLoggedIn$ = this.afAuth.authState.pipe(map(user => !!user));
    this.isLoggedOut$ = this.isLoggedIn$.pipe(map(loggedIn => !loggedIn));
  }
}

使用此方法，我只能从firebase.user中存储的内容中获取详细信息，而不能从我的自定义数据库中获取。如何基于经过身份验证的用户的UID进入特定文档，以便显示诸如生物，性别和语言之类的信息？

这就是我解析dashboard.html

中的信息的方式

<!-- Main content -->
<main role="main" class="col-md-9 ml-sm-auto col-lg-10 px-4">
  <div class="inner-adjust">
    <div class="pt-3 pb-2 mb-3 border-bottom">
      <h1 class="h2">User Profile</h1>
    </div>
    <!-- Show user data when logged in -->
    <div class="row" *ngIf="authService.userData as user">
        <div class="col-md-12">
        <div class="media">
          <img class="align-self-start mr-5 img-thumbnail rounded-circle" src="{{(user.photoURL) ? user.photoURL : '/assets/placeholder-user.jpg'}}"
            alt="{{user.displayName}}">
          <div class="media-body">
            <h1>Hello: <strong>{{(user.username)}}</strong></h1>
            <p>Email: <strong>{{user.email}}</strong></p>
            <p>Gender: <strong>{{user.gender}}</strong></p>
            <p>Languages: <strong>{{user.languages}}</strong></p>
          </div>
        </div>
      </div>

      <!-- </div> -->
    </div>

  </div>
</main>

Answer 1

我在这里看不到使用localStorage的相关用法，只要应用程序正在运行，firebase就会发出authstate，如果用户未登录，authState返回{{ 1}}。

顺便说一句-您也在一个地方使用null，这没有什么意义；）

无论如何，我有一个类似的设置，这就是我的操作方式：

在身份验证服务中：

JSON.parse(JSON.stringify(...))

然后，我只在需要的地方订阅user$ = Observable<any>; this.user$ = this.afAuth.authState.pipe( switchMap(user => { if (user) { return this.afs.doc<any>(`users/${user.uid}`).valueChanges(); } else { return of(null); } }) );。可以通过手动订阅或使用user$管道来实现。如果要手动订阅，则需要记住还要取消订阅销毁组件。

此处使用异步管道进行采样：

async

模板：

user$ = Observable<any>;

constructor(private authService: AuthService) { }

ngOnInit() {
  this.user$ = this.authService.user$;
}

此外，请勿使用<div *ngIf="(user$ | async) as user"> <h1>Hello: <strong>{{(user.username)}}</strong></h1> </div>。请为您的数据创建模型（界面是我的偏好）。毕竟我们正在使用 Type 脚本;）

AngularFire基于用户身份验证检索文档ID

1 个答案: