Firebase与NuxtJS 3集成时无法使用中间件的问题求助

针对你遇到的Firebase认证状态无法在Nuxt3路由中间件中正确使用的问题，以下是可行的解决方案：

1. 调整Firebase插件，等待认证状态初始化 #

修改plugins/firebase.client.ts，确保中间件能等待Firebase认证状态完成初始化：

// plugins/firebase.client.ts
import { initializeApp } from "firebase/app";
import { getAuth, onAuthStateChanged, User } from "firebase/auth";

export default defineNuxtPlugin(async (nuxtApp) => {
  const firebaseConfig = {
    // 填入你的Firebase配置信息
  };

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

  // 创建Promise，等待首次认证状态加载完成
  const authReady = new Promise<User | null>((resolve) => {
    const unsubscribe = onAuthStateChanged(auth, (user) => {
      resolve(user);
      unsubscribe(); // 仅监听一次初始化状态
    });
  });

  // 等待初始化完成后设置全局用户状态
  const initialUser = await authReady;
  const firebaseUser = useFirebaseUser(initialUser);

  // 后续监听认证状态变化，更新全局用户
  onAuthStateChanged(auth, (user) => {
    console.log("auth state changed =", user);
    firebaseUser.value = user;
  });

  // 向Nuxt应用提供auth实例和初始化Promise
  return {
    provide: {
      auth,
      authReady
    }
  };
});

2. 创建路由中间件 #

在项目根目录的middleware文件夹下（没有则新建），创建两个中间件：

保护登录后才能访问的页面（auth.ts） #

// middleware/auth.ts
export default defineNuxtRouteMiddleware(async (to, from) => {
  const { $authReady } = useNuxtApp();
  const firebaseUser = useFirebaseUser();

  // 等待认证状态初始化完成
  await $authReady;

  // 如果未登录，重定向到登录页
  if (!firebaseUser.value) {
    return navigateTo("/login");
  }
});

阻止已登录用户访问登录/注册页（guest.ts） #

// middleware/guest.ts
export default defineNuxtRouteMiddleware(async (to, from) => {
  const { $authReady } = useNuxtApp();
  const firebaseUser = useFirebaseUser();

  // 等待认证状态初始化完成
  await $authReady;

  // 如果已登录，重定向到首页
  if (firebaseUser.value) {
    return navigateTo("/");
  }
});

3. 在页面中应用中间件 #

在需要权限控制的页面中，通过definePageMeta指定使用的中间件：

登录/注册页面（login.vue/register.vue） #

<!-- pages/login.vue -->
<template>
  <!-- 登录表单内容 -->
</template>

<script setup>
definePageMeta({
  middleware: "guest" // 应用guest中间件
});
</script>

需要登录的页面（比如admin.vue） #

<!-- pages/admin.vue -->
<template>
  <!-- 管理页面内容 -->
</template>

<script setup>
definePageMeta({
  middleware: "auth" // 应用auth中间件
});
</script>

方案说明 #

• 核心是通过authReady Promise让中间件等待Firebase认证状态初始化完成，避免了中间件执行时用户状态还未更新的问题
• 利用Nuxt3的状态管理（useState）维护全局用户状态，确保页面和中间件能共享同一用户数据
• 使用middleware目录注册中间件，比在插件中动态注册更稳定，避免了时机冲突问题

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