Next.js+Firebase项目部署后刷新业务页跳回登录页如何解决？

• 本地开发环境Next.js默认以SPA模式运行，路由完全由客户端接管，刷新时登录态已缓存到本地，客户端侧的鉴权逻辑可以正常读取到登录状态
• 部署后如果使用了静态导出、服务器未配置路由 fallback 规则，或者鉴权逻辑时机不对，会导致页面首次加载时判定用户未登录，触发跳转逻辑

1. 配置部署端路由重写规则 #

如果你是将项目静态导出后部署到Nginx、Apache等服务器，需要配置所有路由 fallback 到index.html，确保客户端路由可以正常接管，不会因为服务器找不到/visitors对应的静态文件直接返回根路径或触发404跳转。
Nginx配置示例：

location / {
  try_files $uri $uri/ /index.html;
}

如果部署到Netlify、Firebase Hosting等平台，也需要对应配置单页应用路由规则，保证所有路径都返回入口文件。

2. 调整Firebase登录鉴权时机 #

绝大多数该类问题都是因为鉴权逻辑直接同步判断currentUser是否存在，但Firebase Auth的初始化是异步操作，页面刚加载时currentUser还未完成初始化，会被误判为未登录触发跳转。本地环境因为加载速度快、缓存存在，该问题不易触发，部署后网络延迟会放大初始化时间差，导致跳转问题出现。
修改鉴权逻辑，监听onAuthStateChanged事件，等Firebase Auth初始化完成后再执行跳转判定：

// visitors.tsx页面示例
import { useEffect, useState } from 'react';
import { getAuth, onAuthStateChanged } from 'firebase/auth';
import { useRouter } from 'next/router';

const VisitorsPage = () => {
  const [authLoading, setAuthLoading] = useState(true);
  const router = useRouter();
  const auth = getAuth();

  useEffect(() => {
    const unsubscribe = onAuthStateChanged(auth, (user) => {
      if (!user) {
        router.replace('/');
      }
      setAuthLoading(false);
    });
    return () => unsubscribe();
  }, [auth, router]);

  // 鉴权完成前渲染加载状态，禁止提前跳转
  if (authLoading) return <div>加载中...</div>;

  return <div>访客页面业务内容</div>
}

3. 确认登录态持久化配置 #

检查Firebase Auth的持久化配置是否开启了本地持久化，默认配置为browserLocalPersistence，如果手动修改过配置，需要确认部署环境下没有修改为会话级或者临时持久化：

import { getAuth, setPersistence, browserLocalPersistence } from "firebase/auth";

const auth = getAuth();
setPersistence(auth, browserLocalPersistence);

4. SSR/ISR渲染场景额外配置 #

如果你的页面使用了getServerSideProps做服务端渲染，需要将登录后的ID Token存储到Cookie中，服务端从Cookie读取Token并通过Firebase Admin SDK校验合法性后再返回页面，否则服务端渲染时无法拿到客户端的登录态，会直接返回重定向结果：

// getServerSideProps示例
export async function getServerSideProps(context) {
  const { idToken } = context.req.cookies;
  if (!idToken) {
    return {
      redirect: {
        destination: '/',
        permanent: false,
      },
    }
  }
  // 调用Firebase Admin SDK校验token合法性
  try {
    await admin.auth().verifyIdToken(idToken);
    return { props: {} }
  } catch (e) {
    return {
      redirect: {
        destination: '/',
        permanent: false,
      },
    }
  }
}

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