Question

我正在尝试使用AngularFire2库在Ionic 4应用程序中实现Firebase身份验证。我设置了正确的导入，以便可以访问其他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>

我希望“退出”按钮可以更新页面，并返回登录窗口，并删除“欢迎迈克”文本并删除“退出”按钮。相反，“退出”按钮没有任何作用。

Answer 1

更改此：

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

进入（离子3）

  constructor(public navCtrl: NavController) {}

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

如果您使用的是离子4，请使用以下命令：

  constructor(public navCtrl: NavController) {}

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

Answer 2

好，我知道了。这是一个非常琐碎的错误。我不小心从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进行“刷新”可能很聪明）

AngularFire2不会使用退出用户

2 个答案: