Why this Angular applications can't handle the user status (logged in\out) changing the displayed content after that the user logged in?

问题

I am working on an Angular application using AngularUI (the Angular bundle, this one: https://www.npmjs.com/package/firebaseui-angular) to handle user registration\login on Firebase

My application also uses AnularFire 2 and I have the following problem trying to handle the user status (if the user is logged in or logged out).

This is my home component TypeScript code:

import { Component, NgZone, OnInit } from '@angular/core';
import { AngularFireAuth } from '@angular/fire/auth';
import { Router } from '@angular/router';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss']
})
export class HomeComponent implements OnInit {

  public loggedIn: boolean = false;

  constructor(public afAuth: AngularFireAuth,
              private router:Router,
              private ngZone: NgZone
             ) { }

  ngOnInit(): void {

    this.afAuth.authState.subscribe(this.firebaseAuthChangeListener);

    
  }
   
  private firebaseAuthChangeListener(response) {
    if (response) {
      this.loggedIn = true;
      console.log('Logged in :) ', this.loggedIn);
    } else {
      this.loggedIn = false;
      console.log('Logged out :( ', this.loggedIn);
    }
  }
}

As you can see in this component I declared the boolean loggedIn variable initially setted as false that I set to true when the user executed the log in (and again to false when the user perform the log out). I am trying to use this variable to show different things into the view of this component.

This is the HTML of this component:

<div *ngIf="loggedIn">
    <h1>Logged in</h1>
    <p>TETS</p>
</div>
<div *ngIf="!loggedIn"> 
    <h1>LOGGED OUT</h1>
    <firebase-ui></firebase-ui>
    <p>BLA</p>
</div>

As you can se I put two ngIf to check if the user is logged in or loged out. If the user is logged out it is shown the Firebase UI interface in order to allow to perform the log in.

Here I am obtaining a strange behavior. After the log in into the Chrome console I have this output:

Logged in :)  true

meaning that I correctly performed the log in and that the loggedIn variable is now true.

The problem is that into my page I still see the LOGGED OUT output instead the expected Logged in. So the value of this variable is changed but the page content that is based on the value of the loggedIn variable doesn't change.

What is wrong? What am I missing? How can I fix this issue?

回答1:

JavaScript is functionally scoped, thus working with callbacks will make the context (this) lost, However you have to bind the current context or call the method normally from the outer lexical environment using arrow function

Bind the current context to the function to be executed later:

ngOnInit(): void {
    this.afAuth.authState.subscribe(this.firebaseAuthChangeListener.bind(this));
}

using arrow function:

ngOnInit(): void {
    this.afAuth.authState.subscribe(() => this.firebaseAuthChangeListener());
}

Ref

来源：https://stackoverflow.com/questions/64857189/why-this-angular-applications-cant-handle-the-user-status-logged-in-out-chang

标签

angular

firebase

firebase-authentication

angularfire2

firebaseui