使用Nuxt、Laravel API与Firebase Auth时如何正确传递用户uid至数据库

DevOps 小满

2026-9-24

问题根因

store/auth.js中的register action未正确处理异步逻辑：虽然标注了async，但内部既没有返回Firebase注册操作的Promise，也没有用await等待操作完成，导致调用dispatch('auth/register')后的后续代码提前执行，此时store中的userUid还未赋值为空值，传给Laravel后触发password字段无默认值的数据库错误。
额外调用的auth/onAuth方法内部是Firebase的登录状态监听器，本身不返回Promise，链式调用的then()无法等待监听回调执行，无法起到等待userUid赋值的作用。

修复步骤

1. 修正store/auth.js的register异步逻辑

// store/auth.js
async register({ commit }, payload) {
  // 等待Firebase注册完成
  const result = await firebase
    .auth()
    .createUserWithEmailAndPassword(payload.email, payload.password)
  const user = result.user
  commit('loginStatusChange', true)
  console.log('用户注册成功')
  commit('setUserUid', user.uid)
  commit('setUserEmail', user.email)
  // 直接返回uid，后续调用时无需再从store取值，规避异步取值时序问题
  return user.uid
}

2. 简化register.vue的注册流程，修复异步时序

删除多余的onAuth调用，用async/await确保所有异步操作按顺序执行：

// register.vue
async register() {
  try {
    // 等待Firebase注册完成，拿到返回的uid
    const userUid = await this.$store.dispatch('auth/register', {
      name: this.user.name,
      email: this.user.email,
      password: this.user.password
    })
    // 携带uid请求后端写入本地数据库
    await this.$axios.post('http://localhost:8000/api/v1/users', {
      name: this.user.name,
      email: this.user.email,
      password: userUid
    })
    // 所有操作完成后跳转
    this.$router.push('/thanks')
  } catch (error) {
    // 可自行添加错误提示逻辑
    console.error('注册失败：', error)
  }
}