Nuxt.js 3 + Firebase鉴权中间件问题：未登录页面短暂渲染

问题原因 #

你当前的中间件依赖auth.onAuthStateChanged监听用户状态，这个函数是异步回调模式——中间件会先执行完毕，允许页面开始渲染，之后回调才触发跳转逻辑，这就导致了未登录时后台页面短暂显示的问题。

修正后的中间件代码 #

替换原middleware/isAuth.js代码：

// middleware/isAuth.js
import { getAuth } from "firebase/auth";

export default defineNuxtRouteMiddleware(async (to, from) => {
  const auth = getAuth();
  // 直接获取当前已初始化的用户状态，无需监听
  const user = auth.currentUser;

  // 未登录且访问非登录页，强制跳转登录页
  if (!user && to.name !== "admin") {
    return navigateTo("/admin");
  }
  // 已登录且访问登录页，跳转到后台首页
  else if (user && to.name === "admin") {
    return navigateTo("/admin/dashboard");
  }
  // 已登录且访问后台子页面，允许正常访问（原逻辑中的跳转回来源页逻辑不符合需求，已移除）
});

补充：确保Firebase Auth初始化完成 #

如果遇到auth.currentUser返回null但用户实际已登录的情况，是因为Firebase Auth尚未完成初始化。可以通过Nuxt插件提前初始化并同步用户状态：

1. 创建Firebase客户端插件：

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

export default defineNuxtPlugin(() => {
  const config = useRuntimeConfig();
  // 初始化Firebase应用
  const firebaseApp = initializeApp({
    apiKey: config.public.firebaseApiKey,
    authDomain: config.public.firebaseAuthDomain,
    // 补充你的其他Firebase配置项
  });

  const auth = getAuth(firebaseApp);
  // 全局存储用户状态
  const firebaseUser = useState("firebaseUser", () => null);

  // 监听用户状态变化，同步到全局状态
  onAuthStateChanged(auth, (currentUser) => {
    firebaseUser.value = currentUser;
  });

  return {
    provide: {
      auth,
      firebaseUser
    }
  };
});

2. 修改中间件使用全局状态：

// middleware/isAuth.js
export default defineNuxtRouteMiddleware(async (to, from) => {
  const { firebaseUser } = useNuxtApp();
  const user = firebaseUser.value;

  if (!user && to.name !== "admin") {
    return navigateTo("/admin");
  } else if (user && to.name === "admin") {
    return navigateTo("/admin/dashboard");
  }
});

这样就能确保中间件执行时，用户状态已经完成初始化，避免因Auth未准备好导致的校验错误。

内容的提问来源于stack exchange，提问作者Serdar Göleli