Nuxt Vue使用Firebase9的signInWithEmailAndPassword登录成功回调不触发

核心问题原因 #

• Firebase Auth 仅支持客户端初始化，你当前的firebase插件没有限定仅客户端运行，Nuxt服务端渲染时会初始化无效的auth实例，导致登录成功回调无法正常触发。
• 你的Promise链逻辑存在缺陷，catch后挂载的then会无论登录成功/失败都执行，同时如果第一个成功回调内的store commit操作抛出异常，会被后续catch捕获，表现为成功回调没有执行。
• 未做错误日志埋点，无法区分是登录请求本身未成功，还是成功回调内部代码执行报错导致的逻辑中断。

修复步骤 #

1. 调整Firebase插件注册规则 #

将plugins/firebase.js重命名为plugins/firebase.client.js，确保Firebase仅在客户端初始化，避免服务端渲染导致的auth实例异常。Nuxt会自动识别带.client.js后缀的文件仅在客户端加载，无需额外修改nuxt.config.js配置。

2. 修正登录逻辑的异步写法 #

改用async/await写法梳理逻辑，避免Promise链顺序混淆，同时添加日志排查问题，示例代码如下：

async emailLogin () {
  try {
    // 调用登录接口
    const userCredential = await signInWithEmailAndPassword(auth, this.formData.email, this.formData.password)
    // 这里打日志确认是否登录成功
    console.log('登录成功返回信息：', userCredential)
    // 存储用户状态
    this.$store.commit('setUser', userCredential.user)
    // 登录成功后再执行清空表单、跳转操作
    this.formData.email = ''
    this.formData.password = ''
    this.$refs.form.resetValidation()
    this.$router.push('/post')
  } catch (error) {
    // 打印全量错误信息，排查是否是成功回调内部报错进入catch
    console.error('登录流程报错：', error)
    switch (error.code) {
      case 'auth/invalid-email':
        this.text = '邮箱地址无效'
        break
      case 'auth/user-disabled':
        this.text = '该用户已被禁用'
        break
      case 'auth/user-not-found':
        this.text = '未找到对应账号'
        break
      case 'auth/wrong-password':
        this.text = '密码错误'
        break
      default:
        this.text = '出现未知错误：' + error.message
        break
    }
    this.snackbar = true
  }
}

3. 辅助排查项 #

• 确认Firebase控制台的「Authentication」-「登录方法」中，已开启「电子邮件/密码」登录提供方。
• 核对firebase.client.js中的firebaseConfig配置参数，和Firebase控制台给出的项目配置完全一致。
• 打开浏览器开发者工具的网络面板，排查登录请求是否被广告拦截、隐私类插件拦截，请求返回状态是否正常。
• 检查store中setUsermutation的实现逻辑，确认参数接收、状态赋值没有语法错误或异常抛出。

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