Vue.js+Firebase用户注册后导航栏不显示用户名问题求解

问题根因 #

你遇到的注册后用户名不展示问题有两个核心原因：

• Firebase调用createUserWithEmailAndPassword成功后会立即触发登录状态变更，此时你还没执行updateProfile更新用户名，Vuex中存储的displayName为null
• 你原有代码的Promise链写法错误，this.$router.replace没有等待updateProfile执行完成就提前触发了路由跳转，更新后的用户名没有同步到Vuex

方案一：注册后同时显示用户名和登出按钮 #

修改注册页的submit方法，更新完用户信息后手动触发Vuex的用户数据同步：

// 注册页submit方法修改后代码
submit() {
  firebase
    .auth()
    .createUserWithEmailAndPassword(this.form.email, this.form.password)
    .then(data => {
      // 等待updateProfile执行完成
      return data.user.updateProfile({
        displayName: this.form.name
      })
    })
    .then(() => {
      // 手动触发Vuex的用户数据更新，同步最新的displayName
      this.$store.dispatch('fetchUser', firebase.auth().currentUser)
      // 再执行路由跳转
      this.$router.replace({ name: "Profile" })
    })
    .catch(err => {
      this.error = err.message;
    });
}

注意：请确认你的项目入口文件（如main.js）中已添加Firebase登录状态监听代码，否则全局状态无法自动同步：

// main.js中添加
firebase.auth().onAuthStateChanged(user => {
  store.dispatch('fetchUser', user)
})

方案二：注册后不自动登录 #

利用Firebase的登出方法，注册完成后直接销毁登录状态即可：

// 注册页submit方法修改后代码
submit() {
  firebase
    .auth()
    .createUserWithEmailAndPassword(this.form.email, this.form.password)
    .then(data => {
      // 先更新用户信息
      return data.user.updateProfile({
        displayName: this.form.name
      })
    })
    .then(() => {
      // 直接登出，取消自动登录状态
      return firebase.auth().signOut()
    })
    .then(() => {
      // 跳转至登录页或首页
      this.$router.replace({ name: "Login" })
    })
    .catch(err => {
      this.error = err.message;
    });
}

内容的提问来源于stack exchange，提问作者HStoltz