Angular - Firebase在重定向后获取用户数据

Question

我目前尝试使用 signInWithRedirect 重构所有 signInWithPopup 方法，因为它在移动设备上更加用户友好。然而，当我尝试在重定向后检索数据时，我永远无法得到它。我什至尝试设置超时。也许你们中的一些人知道我的问题的解决方案： Firebase doc

我的服务

  public loginWithGoogle(): Promise<firebase.UserCrendential> {
      const provider = new firebase.auth.GoogleAuthProvider();
      return this.angularFireAuth.auth.signInWithRedirect(provider).then(() =>
       this.angularFireAuth.auth.getRedirectResult().then(res => res));
  }

组件

  // binded on a click event on the dom - just wanna log the data not more :(
  public loginWithGoogle(): void {
    this.loginService.loginWithGoogle().then(res => console.log(res))
  }

Answer 1

与 signInWithPopup 不同，signInWithRedirect 调用会导致页面重新加载，并且在此重新加载时不会调用 signInWithRedirect，它的承诺永远不会解决，然后 getRedirectResult() 也不会达到。

你应该在构造函数上调用 this.angularFireAuth.auth.getRedirectResult() 。当服务从重定向加载时，它提供数据，否则返回{user: null}。一个example on stackblitz

Answer 2

我以前遇到过这种情况。

如果您有兴趣，这里有一个解决方法：

您可以在AngularFireAuth 上收听authState Observable。一旦您在组件上的 ngOnInit 订阅它，在重定向之后，authState 将发生变化，并会产生登录用户的详细信息。

类似这样的：

import { Component, OnInit } from '@angular/core';
...
import { AngularFireAuth } from 'angularfire2/auth';
...

@Component({...})
export class UserDetailsComponent implements OnInit {

  constructor(...public afAuth: AngularFireAuth,...) { }

  ngOnInit() {
    this.afAuth.authState.subscribe(user => {
      if(user) {
        console.log('User Details: ', user);
      } else {
        console.log('No user logged in as of now');
      }
    })
  }

  ...

}