onAuthStateChanged 返回 unsubscribe，我要返回 currentUser

Question

我在一个使用 firebase (5.2) 的 Angular 项目 (6.0) 中。我正在使用该功能：

firebase.auth().onAuthStateChanged

这个函数返回一个firebase.Unsubscribe，我不掌握。我只知道使用 Observables、Subjects 和 Promise。

我想将此函数用作可观察对象，例如，每当我找回 currentUser 时，我都会订阅它。

到目前为止，我已经尝试将它包装成一个 observable：

auth.service.ts

  loadUser() {
    return Observable.create((observer: Observer<any>) => {
      firebase.auth().onAuthStateChanged(
        currentUser => { return currentUser }
      )
    })
  }

每当我启动我的 Angular 应用程序时，我都会订阅：

在 ngOnInit 中：

this.authService.loadUser()
  .subscribe(
    response => {
      console.log("response");
      console.log(response);
    },
    error => {
      console.log("error");
      console.log(error);
    }
  )

但订阅永远不会被触发。我没有正确包装 Firebase 的功能。 1. 我真的不明白他们为什么返回 firebase.unsubscribe。 2. 我该如何解决这个挑战？

谢谢

Answer 1

如果您考虑使用库angularfire2（我真的建议您至少在您的应用程序中尝试一下），您可以利用AngularFireAuth 等可注入服务来跟踪身份验证状态作为可观察对象。下面是使用 AngularFire2 中的 AngularFireAuth 获取当前用户信息、检查用户是否登录以及登录/注销的示例

import { firebase } from '@firebase/app';
import { AngularFireAuth } from 'angularfire2/auth';
import { User, UserCredential } from '@firebase/auth-types';
import { Observable } from 'rxjs';
import { take, map } from 'rxjs/operators';
...

user: Observable<User>;

constructor(private afAuth: AngularFireAuth) {
  this.user = this.afAuth.authState;
}

getUser(): Observable<User> {
  return this.user.pipe(take(1));
}

isLoggedIn(): Observable<boolean> {
  return this.user.pipe(
    take(1),
    map(authState => !!authState)
  );
}

logUser() {
  this.getUser().subscribe(user => console.log(user));
}

login(): Promise<UserCredential> {
  return this.afAuth.auth.signInWithPopup(new firebase.auth.GoogleAuthProvider());
}

logout() {
  return this.afAuth.auth.signOut();
}

希望对您有所帮助！