当前用户设置为 null，即使已登录

Question

I have created Auth Service

import { Injectable } from '@angular/core';
import { AngularFireAuth } from '@angular/fire/auth';
import { User } from 'firebase';


@Injectable({
  providedIn: 'root'
})
export class AuthService {
  user: User;

  constructor(public afAuth: AngularFireAuth) {
    this.afAuth.authState.subscribe(user => {
      if (user) {
        this.user = user;
        localStorage.setItem('user', JSON.stringify(this.user));
      } else {
        localStorage.setItem('user', null);
      }
    });
  }

  async register(email: string, password: string, displayName: string) {
    await this.afAuth.auth.createUserWithEmailAndPassword(email, password);

    await this.user.updateProfile({ displayName });

    this.user.sendEmailVerification();

    return this.user.uid;
  }

after user is successfully registered i can access user property and call updateProfile function.

But i want to use this service also for updating profile information like: email or phone, but whenever i do that i am getting user set to null.

Answer 1

That's because user at first is null . You might want to change your constructor as follows:

constructor(public afAuth: AngularFireAuth) {
    this.user = localStorage.getItem('user'); // <-- Added this line
    this.afAuth.authState.subscribe(user => {
      if (user) {
        this.user = user;
        localStorage.setItem('user', JSON.stringify(this.user));
      } else {
        localStorage.setItem('user', null);
      }
    });
  }

You might want to read it:

I'm assuming you're getting null when you're trying to read from AuthService.user . This is expected.

AuthService.user at first is null, and after a successful response from firebase, you set user as FirebaseUser object.

In a different place, you're trying to fetch user . But the problem is that you're fetching it too soon. Meaning, you're fetching user when it's still null (because firebase hasn't returned any value yet).

In order to fix it, you need to set your user as Observable:

export class AuthService {
  user$: Observable<User>;

  constructor(public afAuth: AngularFireAuth) {
    this.user$ = new Observable(localStorage.getItem('user')).pipe(
      switchMap((fromLocal) => this.afAuth.authState),
      tap((user) => localStorage.setItem('user', JSON.stringify(user)))
    );
  }

in a different class:

  authService.user$.subscribe(user => /** user: User **/); // Don't forget to unsubscribe

or in an HTML template (note the async pipe):

  <ng-container *ngIf="authService.user$ | async as user">
    <!-- user: User -->
  </ng-container>

and in your register, change to:

  async register(email: string, password: string, displayName: string) {
    await this.afAuth.auth.createUserWithEmailAndPassword(email, password);

    return this.user$.pipe(
      first(),
      tap((user) => user.updateProfile({ displayName }),
      tap((user) => user.sendEmailVerification()),
      map((user) => user.uid)
    ).toPromise();
  }

PS:

It's conventional to add $ suffix for observables instances (eg user -> user$ ).