Nuxt3中如何让插件先于全局中间件运行？Firebase认证处理

你遇到的核心问题不是中间件比插件先运行，而是Firebase Auth的初始化（包括本地会话加载）是异步过程，中间件执行时auth实例还未完成初始状态同步。下面是几种实用的解决思路：

方案一：异步插件+中间件等待状态就绪 #

1. 编写异步Firebase插件 #

在plugins/firebase.client.ts中初始化Firebase并等待auth初始状态加载完成：

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

export default defineNuxtPlugin(async () => {
  const config = useRuntimeConfig()
  const firebaseConfig = {
    apiKey: config.public.firebaseApiKey,
    authDomain: config.public.firebaseAuthDomain,
    // 补充你的其他Firebase配置项
  }

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

  // 等待Auth初始状态（本地缓存会话）加载完成
  await new Promise(resolve => {
    const unsubscribe = auth.onAuthStateChanged(() => {
      unsubscribe()
      resolve(true)
    })
  })

  return {
    provide: { firebaseAuth: auth }
  }
})

2. 全局中间件检查登录状态 #

在middleware/auth.global.ts中，先确保auth实例就绪再做跳转判断：

export default defineNuxtRouteMiddleware(async (to, from) => {
  if (process.client) {
    const { $firebaseAuth } = useNuxtApp()
    const user = $firebaseAuth.currentUser

    if (!user && to.path !== '/login') {
      return navigateTo('/login')
    } else if (user && to.path === '/login') {
      return navigateTo('/dashboard')
    }
  }
})

方案二：全局状态管理用户信息（更简洁） #

用Nuxt的useState存储用户状态，插件初始化时同步auth状态，中间件直接读取状态：

1. Firebase插件 #

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

export default defineNuxtPlugin(() => {
  const config = useRuntimeConfig()
  const firebaseConfig = { /* 你的配置 */ }
  const app = initializeApp(firebaseConfig)
  const auth = getAuth(app)

  // 全局状态存储用户
  const user = useState('firebaseUser', () => null)

  // 监听Auth状态变化，自动更新全局状态
  onAuthStateChanged(auth, (currentUser) => {
    user.value = currentUser
  })

  return {
    provide: { firebaseAuth: auth }
  }
})

2. 全局中间件 #

export default defineNuxtRouteMiddleware(async (to, from) => {
  if (process.client) {
    const user = useState('firebaseUser')

    // 等待初始状态加载完成
    if (user.value === null) {
      await new Promise(resolve => {
        const unsubscribe = useNuxtApp().$firebaseAuth.onAuthStateChanged(() => {
          unsubscribe()
          resolve(true)
        })
      })
    }

    // 跳转逻辑
    if (!user.value && to.path !== '/login') {
      return navigateTo('/login')
    } else if (user.value && to.path === '/login') {
      return navigateTo('/dashboard')
    }
  }
})

方案三：中间件内直接等待Auth状态 #

无需修改插件的异步逻辑，在中间件里通过onAuthStateChanged等待初始状态：

export default defineNuxtRouteMiddleware((to, from) => {
  if (process.client) {
    const auth = useNuxtApp().$firebaseAuth

    // 返回Promise延迟路由处理，直到Auth状态就绪
    return new Promise(resolve => {
      const unsubscribe = auth.onAuthStateChanged((user) => {
        unsubscribe()
        if (!user && to.path !== '/login') {
          resolve(navigateTo('/login'))
        } else if (user && to.path === '/login') {
          resolve(navigateTo('/dashboard'))
        } else {
          resolve(true)
        }
      })
    })
  }
})

关键说明 #

Nuxt3的全局插件默认会在中间件之前执行，但Firebase Auth的本地会话加载是异步操作，这才是导致中间件执行时无法获取用户的原因。上面的方案都是通过等待Auth初始状态同步完成来解决问题，其中方案二更适合项目扩展——全局状态可以在任意组件中直接复用用户信息，无需重复调用Firebase API。

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