创建帐户后 displayName 总是返回 null

Question

我有一个使用 Firebase 作为后端的 Vue 应用程序。新用户注册时使用电子邮件和密码选项。这是firebase方法：

firebase.auth()
          .createUserWithEmailAndPassword(this.user.email, this.user.password)
          .then((res) => {
            res.user
              .updateProfile({
                displayName: this.user.username,
              })
              .then(() => {
              });
          })
          .catch((error) => {
            this.error = error.message;
            console.log("err", error);
          });

在我的 main.js 文件中，我的 onAuthStateChanged 方法如下所示：

firebase.auth().onAuthStateChanged((user) => {
  if (user) {
    console.log("user", user);
    console.log("nme", user.displayName);
    console.log("email", user.email);
    store.dispatch("fetchUser", user);
  } else {
    store.dispatch("logout");
  }

这个方法当然是在用户注册的时候触发的。问题是我无法访问用户的 displayName 属性，由于某种原因，当用户注册时它总是为空。当我刷新页面时，它具有值，但在注册其 null 并将 null 值作为用户名传递给 Vuex 之后。奇怪的是，例如电子邮件可以立即访问。这是我控制台的截图：

第一部分是"console.log("user", user)，然后是其他打印。正如您在用户对象中看到的，displayName 有一个值，但是当我调用 user.displayName 时，它​​的空。

谁能解释一下为什么会这样？提前致谢！

Answer 1

这是因为updateProfile()方法是异步的，不会触发通过onAuthStateChanged()设置的监听器。

因此，当onAuthStateChanged() 监听器在用户创建后立即触发时（并登录，因为在创建用户帐户后，用户也已登录）displayName 的值尚未更新。

当updateProfile() 方法返回的承诺得到解决时，您可能应该更新 Vuex Store 中的状态。

大致如下：

  firebase
    .auth()
    .createUserWithEmailAndPassword(this.user.email, this.user.password)
    .then((res) => {
      return res.user.updateProfile({
        displayName: this.user.username,
      });
    })
    .then(() => {
      //Update the Vuex Store here with firebase.auth().currentUser
      console.log(firebase.auth().currentUser.displayName);
    })
    .catch((error) => {
      this.error = error.message;
      console.log('err', error);
    });