Question

我有这个angular 6应用程序，我在其中使用Firebase的Google登录名实现了登录名。我添加了一个在您注销时显示登录的按钮，或者，如果您已经登录，则该按钮显示注销，它还显示了您当前使用的电子邮件地址登录。

这是一个代码示例：

<p *ngIf="isLoggedIn()" class="text-white" style="margin-bottom: 0; padding-left: 10px">{{ afAuth.auth.currentUser.email }}</p>
<button *ngIf="!isLoggedIn()" class="btn btn-danger" type="button" (click)="login()">Log In</button>
<button *ngIf="isLoggedIn()" class="btn btn-danger" type="button" (click)="logout()">Log Out</button>

constructor(private afAuth: AngularFireAuth) {
}

isLoggedIn() {
  return this.afAuth.auth.currentUser;
}

login() {
  try {
    this.afAuth.auth.signInWithPopup(new auth.GoogleAuthProvider());
  } catch (e) {
    console.log(e.message);
  }
}

logout () {
  try {
    this.afAuth.auth.signOut().then(() => {
      this.hideAllViews();
    });
  } catch (e) {
    console.log(e.message);
  }
}

一切似乎都可以正常工作，只是如果您当前已登录并刷新页面，则它似乎无法显示正确的状态，这意味着它显示的是登录按钮，而不是显示您的电子邮件地址和注销按钮，因为您已经登录。一旦您单击标签或任何其他按钮或链接，页面更新就会重新显示为显示电子邮件和注销 strong>按钮。

在我看来，HTML页面在检查 isLoggedIn（）方法之前正在加载。

通过在构造函数中添加以下内容，我找到了解决方法：

setTimeout(function () {
},

请让我知道解决此问题的“角度方法” /最佳方法。

Answer 1

您可以检查onAuthStateChanged()的回调，并找出var currentUser的初始化时间。

/* Don't forget ot import the firebase */
import * as firebase from 'firebase/app';

<p *ngIf="isLoggedIn()" class="text-white" style="margin-bottom: 0; padding-left: 10px">{{ afAuth.auth.currentUser.email }}</p>
<button *ngIf="!isLoggedIn()" class="btn btn-danger" type="button" (click)="login()">Log In</button>
<button *ngIf="isLoggedIn()" class="btn btn-danger" type="button" (click)="logout()">Log Out</button>

constructor(private afAuth: AngularFireAuth) {
}

/*Use callback to check when the variable is initialized*/
firebase.auth().onAuthStateChanged((user) => {
  if (user) {
    // If there is a user (a user is loggedIn), do something in that case
  } else {
    // Otherwise ...
  }
});

login() {
  try {
    this.afAuth.auth.signInWithPopup(new auth.GoogleAuthProvider());
  } catch (e) {
    console.log(e.message);
  }
}

logout () {
  try {
    this.afAuth.auth.signOut().then(() => {
      this.hideAllViews();
    });
  } catch (e) {
    console.log(e.message);
  }
}

Answer 2

您所做的是一个很好的解决方法，但是实际应该使用的是life cycle hook(s)，例如：ngAfterViewInit

ngAfterViewInit() {
   this.isLoggedIn();
}

Angular 6视图未更新以更正页面加载时的数据

2 个答案: