Vue3+Quasar+Firebase注册后需刷新才获取auth.currentUser问题

注册/登录后必须刷新页面才能渲染用户数据，其他功能正常。希望无需刷新页面就能让displayName直接显示在导航栏。

App.vue 代码 #

<template>
  <router-view />
</template>

<script setup>
import { onMounted } from "vue";
import { useAuthStore } from "stores/auth";

const storeAuth = useAuthStore();

onMounted(() => {
  storeAuth.init();
});
</script>

auth Store 中的 init() 函数 #

init() {
  onAuthStateChanged(auth, (user) => {
    if (user) {
      this.user.id = user.uid;
      this.user.email = user.email;
      this.user.displayName = user.displayName;
    } else {
      this.user = {};
    }
  });
}

注册表单组件的提交与重定向函数 #

// 触发Firebase注册，成功后打开确认模态框
const onSubmit = () => {
  storeAuth.registerUser(credentials);
  registered.value = true;
};

// 用户点击确认模态框的OK按钮后，重定向到个人资料页
function redirectUser() {
  const id = auth.currentUser.uid;
  router.push({ name: "user", params: { id } });
}

auth Store 中的 registerUser 方法 #

registerUser(credentials) {
  createUserWithEmailAndPassword(
    auth,
    credentials.email,
    credentials.password
  )
    .then((userCredential) => {
      console.log(userCredential);
      const user = userCredential.user;
      updateProfile(auth.currentUser, {
        displayName: credentials.displayName,
      });
      setDoc(doc(db, "users", auth.currentUser.uid), {
        displayName: credentials.displayName,
        email: credentials.email,
        countryCode: credentials.countryCode,
        phoneNumber: `+${credentials.countryCode.value}${credentials.phoneNumber}`,
        userType: "Persona",
        uid: auth.currentUser.uid,
      });
    })
    .catch((error) => {
      console.log("error.message: ", error.message);
    });
}

解决方案 #

问题核心 #

1. updateProfile 是异步操作，但你没有等待它完成就依赖auth.currentUser的数据，此时Firebase的用户对象还未更新displayName
2. 修改用户资料不会触发onAuthStateChanged监听，导致store中的用户状态无法自动同步

修复步骤 #

1. 改造registerUser为异步方法，手动同步store状态

async registerUser(credentials) {
  try {
    const userCredential = await createUserWithEmailAndPassword(
      auth,
      credentials.email,
      credentials.password
    );
    const user = userCredential.user;
    
    // 等待用户资料更新完成
    await updateProfile(user, {
      displayName: credentials.displayName,
    });
    
    // 手动更新store中的用户数据（确保响应式更新）
    this.user = {
      id: user.uid,
      email: user.email,
      displayName: credentials.displayName
    };
    
    // 等待数据库写入完成
    await setDoc(doc(db, "users", user.uid), {
      displayName: credentials.displayName,
      email: credentials.email,
      countryCode: credentials.countryCode,
      phoneNumber: `+${credentials.countryCode.value}${credentials.phoneNumber}`,
      userType: "Persona",
      uid: user.uid,
    });
    
    return user;
  } catch (error) {
    console.log("error.message: ", error.message);
    throw error; // 抛出错误让组件处理失败场景
  }
}

2. 修改组件onSubmit，等待注册完成后再显示模态框

const onSubmit = async () => {
  try {
    await storeAuth.registerUser(credentials);
    registered.value = true;
  } catch (error) {
    // 这里可以添加注册失败的用户提示
    console.error(error);
  }
};

3. 优化init函数的状态更新逻辑

确保替换整个user对象，保证响应式更新生效：

init() {
  onAuthStateChanged(auth, (user) => {
    this.user = user ? {
      id: user.uid,
      email: user.email,
      displayName: user.displayName
    } : {};
  });
}

完成以上修改后，注册流程完成时store中的用户数据会立即更新，导航栏绑定的storeAuth.user.displayName会自动渲染，无需刷新页面。

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