AngularFire2 Не выходит из системы с пользователем

Question

Я пытаюсь реализовать аутентификацию Firebase в моем приложении Ionic 4 с библиотекой AngularFire2.Я настроил правильный импорт так, чтобы я мог получить доступ к другим свойствам AngularFireAuth, но я не могу успешно выполнить выход.В настоящее время все мои аутентификации в Firebase происходят на странице с именем home.

Я пытался удалить обещание, но, похоже, это ничего не дает.

Это предварительная запись вида в

Это дополнительная запись вида в

Вот мой машинописный файл:

import { Component } from '@angular/core';
import {AngularFireAuth} from '@angular/fire/auth';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {

  constructor(public afAuth: AngularFireAuth) {}

  signOut() {
    this.afAuth.auth.signOut().then(() => {
      location.reload();
    });
  }
}

Вот мой HTML

<ion-header>
  <ion-toolbar>
    <ion-title>
      Ionic Blank
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <div class="ion-padding">
    The world is your oyster.
    <p>If you get lost, the <a target="_blank" rel="noopener" href="https://ionicframework.com/docs/">docs</a> will be your guide.</p>
  </div>
<firebase-ui></firebase-ui> <!-- EDIT: this is what firebaseui-angular uses to display the login UI -->
  <h1 *ngIf="afAuth.auth.currentUser">Welcome {{afAuth.auth.currentUser.displayName}}</h1>
  <ion-button *ngIf="afAuth.auth.currentUser" (click)="signOut">Sign Out</ion-button>
</ion-content>

Я ожидал, что кнопка «Выход» обновит страницу и вернет окно входа в систему и удалит текст Welcome Mikeи удалите кнопку выхода.Вместо этого кнопка выхода не сделала ничего.

Answer 1

Хорошо, я понял это. Это была довольно тривиальная ошибка. Я случайно неправильно вызвал функцию со стороны HTML

Это:

<ion-button *ngIf="afAuth.auth.currentUser" (click)="signOut">Sign Out</ion-button>

Должно быть так:

<ion-button *ngIf="afAuth.auth.currentUser" (click)="signOut();">Sign Out</ion-button>

В любом случае, спасибо за усилия (возможно, было разумно использовать navCtrl для «обновления» в любом случае)

Answer 2

Изменить это:

    this.afAuth.auth.signOut().then(() => {
      location.reload();
    });
  }

в это (ионный 3):

  constructor(public navCtrl: NavController) {}

  signOut() {
    this.afAuth.auth.signOut().then(() => {
      this.navCtrl.pop();
    });
  }

Если вы используете ionic 4, используйте следующее:

  constructor(public navCtrl: NavController) {}

  signOut() {
    this.afAuth.auth.signOut().then(() => {
      this.navCtrl.back();
    });
  }