Firebase：如何从 firebase.auth().onAuthStateChanged 异步绑定用户到 Angular 模板？

Question

What I have tried:

ngOnInit() {
    firebase.auth().onAuthStateChanged((user) => {
    console.log(user.uid); <-------------- Correctly showing in console
    this.uid = user.uid; <---------------- Not binding to html
    });
}

If I delay the function by 5000ms, it will bind to the template:

ngOnInit() {
  setTimeout(() => {
     this.getUid();
  }, 5000);
}

getUid(){
    firebase.auth().onAuthStateChanged((user) => {
    console.log(user.uid); <-------------- Correctly showing in console
    this.uid = user.uid; <---------------- Binding perfectly
    });
}

How do I dynamically determine that the onAuthStateChanged is ready? I am not using angularfire2/auth , and I would like to avoid it and instead use the standard Firebase JavaScript API.

Answer 1

You could create your own Firebase Auth Angular Service and leverage RXJS observables to handle asynchronous initialization.

firebase-auth.service.ts

import { Injectable, Optional } from '@angular/core'
import * as firebase from 'firebase/app'
import 'firebase/auth'

import { BehaviorSubject } from 'rxjs'


@Injectable({
  providedIn: 'root'
})
export class FirebaseAuthService {
  public app: firebase.app.App;
  public auth: firebase.auth.Auth;
  public user$: BehaviorSubject<firebase.User> = new BehaviorSubject(null);

  // Note: FirebaseConfig is a class to enable injecting the Firebase app 
  // initialization params when providing the service in app.module.ts.
  constructor(@Optional() fb_config: FirebaseConfig) {
    // https://firebase.google.com/docs/reference/js/firebase.app.App
    this.app = firebase.initializeApp(fb_config);
    this.auth = firebase.auth(this.app);

    this.auth.onAuthStateChanged(
      (user: firebase.User) => {
        if (user) {
          this.user$.next(user);
          console.log('User signed in');
        } else {
          this.user$.next(null);
          console.log('User signed out');
        }
      },
      (error: firebase.auth.Error) => {
        // handle error
      }
    )
  }
  // ...
}

Component

@Component({
  moduleId: module.id,
  selector: 'my-component',
  templateUrl: 'my.component.html',
  styleUrls: ['my.component.css']
})
export class MyComponent implements OnInit {
  constructor(private authService: FirebaseAuthService) {}
  // ...
}

Template

<ng-container *ngIf="( authService.user$ | async ) as user">
  <div>Hello {{user.displayName}}</div>
</ng-container>