Question

我在使用Firebase（5.2）的Angular项目（6.0）中。我正在使用该功能：

firebase.auth().onAuthStateChanged

此函数返回一个firebase.Unsubscribe，我不掌握。我只知道与Observables，Subject和Promises合作。

我想将此功能作为一种可观察的方式使用，例如，每当我获得currentUser时，我都订阅它。

到目前为止，我已经尝试将其包装为可观察到的：

auth.service.ts

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

每当我开始我的角度申请时我都会订阅：

在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();
}

希望有帮助！

onAuthStateChanged返回取消订阅，我想返回currentUser

1 个答案: