创建帐户后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)，然后是其他打印。正如您在 user 对象中看到的，displayName 有一个值，但是当我调用 user.displayName 时，它为 null。

有人可以解释一下为什么会发生这种情况吗？预先感谢！

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);
    });