Remix会话页面刷新/子路由跳转不持久问题求助

核心问题分析 #

你的代码里有几个关键错误导致会话无法跨页面/请求持久：

1. Cookie配置错误 #

• domain设置为remix.run，这是Remix官方域名，你的应用不在该域名下，浏览器会直接忽略这个Cookie。
• 本地开发或自定义域名场景下，要么移除domain让浏览器自动适配当前域名，要么设置为你的实际域名（比如localhost:3000）。

2. Action函数未正确返回带Cookie头的响应 #

你在Action里创建了包含Set-Cookie头的JSON响应，但没有return它，而是直接return了解码后的Token，导致会话Cookie根本没发送给浏览器，后续自然无法读取。

3. Loader函数冗余的Session提交 #

Loader里每次都调用commitSession，但如果Session数据没有修改，重复提交属于冗余操作，可能会覆盖原有Cookie。

修正后的代码 #

1. 修正app/sessions.ts的Cookie配置 #

// app/sessions.ts
import { createCookieSessionStorage } from "@remix-run/node";

type SessionData = {
  userId: string;
};

type SessionFlashData = {
  error: string;
};

const { getSession, commitSession, destroySession } =
  createCookieSessionStorage<SessionData, SessionFlashData>({
    cookie: {
      name: "__session",
      // 移除错误的domain配置，浏览器会自动使用当前域名
      path: "/account", // 如需全站生效，改为"/"
      sameSite: "lax",
      secrets: ["xxxx"],
      // 生产环境开启secure（仅HTTPS），本地开发关闭
      secure: process.env.NODE_ENV === "production",
      maxAge: 30 * 24 * 60 * 60, // 30天有效期
    },
  });

export { getSession, commitSession, destroySession };

2. 修正app/routes/account._index.tsx的Action函数 #

export async function action({
  request,
}: ActionFunctionArgs){

  const token = await request.formData();
  const decodedToken = jwtDecode(token.get('credential') as string) as googleJwtToken;

  const user: UserProps = {
    id: decodedToken?.email,
    email: decodedToken.email,
    name: decodedToken.name,
    picture: decodedToken.picture,
    given_name: decodedToken.given_name,
    family_name: decodedToken.family_name,
    locale: decodedToken.locale
  }

  await createUser(user);

  const session = await getSession(request.headers.get("Cookie"));
  session.set("userId", decodedToken.email);

  // 必须return带Set-Cookie头的响应，才能让浏览器保存会话
  return json(decodedToken, {
    headers: {
      "Set-Cookie": await commitSession(session),
    },
  });
}

3. 优化Loader函数 #

export async function loader({ request }: ActionFunctionArgs ){
  const session = await getSession(request.headers.get("Cookie"));
  console.log(session.data);

  // Session未修改时，无需调用commitSession
  return json(session.data);
}

额外调试建议 #

1. 打开浏览器开发者工具的「Application」标签，查看__session Cookie是否被正确保存。
2. 检查后续请求的「Request Headers」，确认是否携带了Cookie: __session=xxx。
3. 本地开发时确保secure为false，因为HTTP协议不支持Secure Cookie。

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