如何在Nuxt中配置Firebase模块化SDK V9的持久化登录？

核心逻辑 #

Firebase Auth 本身自带跨标签页会话同步能力，但需要在 Nuxt 项目里正确配置认证监听和状态管理，才能确保新标签页加载时能自动识别已登录状态。

具体实现步骤 #

1. 正确初始化 Firebase Auth #

在 Nuxt 插件文件（比如 plugins/firebase.js）中完成 Auth 初始化，并注入全局：

import { initializeApp } from 'firebase/app'
import { getAuth, onAuthStateChanged } from 'firebase/auth'

// 你的 Firebase 配置
const firebaseConfig = {
  apiKey: 'YOUR_API_KEY',
  authDomain: 'YOUR_AUTH_DOMAIN',
  projectId: 'YOUR_PROJECT_ID',
  storageBucket: 'YOUR_STORAGE_BUCKET',
  messagingSenderId: 'YOUR_SENDER_ID',
  appId: 'YOUR_APP_ID'
}

const app = initializeApp(firebaseConfig)
const auth = getAuth(app)

export default ({ app }, inject) => {
  inject('firebaseAuth', auth)
  
  // 全局监听认证状态变化，同步到状态管理工具（比如 Pinia/Vuex）
  onAuthStateChanged(auth, (user) => {
    if (user) {
      app.$pinia.state.value.auth.user = user
    } else {
      app.$pinia.state.value.auth.user = null
    }
  })
}

2. 显式配置持久化存储 #

Firebase Auth 默认用 localStorage 持久化会话，但显式配置能避免意外问题：

// 在上述插件文件的 Auth 初始化后添加
import { setPersistence, browserLocalPersistence } from 'firebase/auth'

setPersistence(auth, browserLocalPersistence)
  .catch(err => console.error('持久化配置失败:', err))

3. 页面初始化时主动校验用户状态 #

由于 Nuxt 服务端渲染特性，新标签页加载时需要在客户端主动拉取当前用户：

// 在布局组件或页面的 mounted 钩子中
async mounted() {
  const user = await this.$firebaseAuth.currentUser
  if (user) {
    this.$store.commit('auth/SET_USER', user)
  }
}

4. 规避服务端渲染的状态冲突 #

服务端无法读取客户端的 localStorage，所以在状态管理的服务端初始化钩子中跳过 Auth 处理：

// store/index.js（Vuex 示例）
export const actions = {
  nuxtServerInit() {
    // 服务端不处理 Auth 状态，完全交给客户端初始化
  }
}

关键注意事项 #

• 不要手动将用户令牌存到 localStorage，完全依赖 Firebase 内置的持久化机制
• onAuthStateChanged 是跨标签页同步的核心，任何标签页的登录/登出操作都会触发所有标签页的回调
• 确保 Firebase Auth 版本与 Nuxt 版本兼容，避免依赖冲突

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