在Nuxt JS中Vue应用创建前检测Firebase onAuthStateChanged

我完全懂你的困扰！在Vue 2里我们可以直接在main.js里把应用创建逻辑包裹在Firebase的auth状态监听里，但Nuxt把入口封装起来了，确实得换个思路来实现同样的效果。下面是亲测可行的方案：

1. 创建客户端专属的Firebase Auth插件 #

首先在项目的plugins目录下新建firebase-auth.client.js（后缀.client.js是Nuxt的约定，代表这个插件只在客户端运行，不需要服务端执行）：

import { auth } from '@/firebase/init'

export default ({ app, store }) => {
  // 返回Promise让Nuxt等待鉴权状态确定后再继续初始化
  return new Promise((resolve) => {
    // 监听Firebase Auth状态变化
    auth.onAuthStateChanged((user) => {
      // 把用户状态存入Vuex（如果不用Vuex，可以存在app全局对象里）
      store.commit('auth/SET_USER', user)
      // 状态确定后，resolve这个Promise，让Nuxt继续后续流程
      resolve()
    })
  })
}

2. 在Nuxt配置中注册插件 #

打开nuxt.config.js，在plugins数组里添加这个插件：

export default {
  // ...其他配置项
  plugins: [
    // ...你已有的其他插件
    { src: '@/plugins/firebase-auth.client.js', mode: 'client' }
  ]
}

3. 处理初始化期间的加载状态 #

因为插件会等待鉴权状态确定后才继续渲染应用，这期间你可以给用户展示加载提示，避免空白页面。修改你的根布局layouts/default.vue：

<template>
  <div v-if="$store.state.auth.isLoaded">
    <!-- 正常页面内容 -->
    <nuxt />
  </div>
  <div v-else class="loading-container">
    <!-- 自定义加载提示，比如旋转动画或文字 -->
    <p>正在初始化鉴权，请稍候...</p>
  </div>
</template>

<script>
export default {
  // 可选：如果需要监听状态变化，可以加个watch
  watch: {
    '$store.state.auth.isLoaded'(newVal) {
      if (newVal) {
        // 鉴权完成后的额外逻辑
      }
    }
  }
}
</script>

<style scoped>
.loading-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
</style>

如果用Vuex的话，记得在store/auth.js里添加对应的状态和mutation：

export const state = () => ({
  user: null,
  isLoaded: false // 标记鉴权是否完成
})

export const mutations = {
  SET_USER(state, user) {
    state.user = user
    state.isLoaded = true
  }
}

方案原理 #

Nuxt的插件系统支持返回Promise——当插件返回Promise时，Nuxt会暂停应用初始化流程，直到这个Promise被resolve，这就完美复刻了Vue 2里等待鉴权完成再创建应用的逻辑。

如果你不需要Vuex，也可以把用户状态挂载到Nuxt的全局app对象上，比如在插件里改成：

auth.onAuthStateChanged((user) => {
  app.$currentUser = user
  resolve()
})

之后在组件里直接通过this.$currentUser访问当前用户即可。

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