Next.js 13后台页面刷新后用户登出问题求助

你遇到的刷新页面后重定向至登录页的问题，核心原因在于JWT会话的有效期管理错误、前端参数传递缺失，以及缺少路由级别的会话验证机制。具体来说：

1. CredentialsProvider未定义rememberMe字段，导致登录时无法正确传递"记住我"状态，authorize方法中credentials.rememberMe始终为undefined
2. jwt回调未保留用户对象中的exp字段，导致生成的JWT Token没有正确的过期时间，会话验证失效
3. session回调手动修改expires字段，破坏了NextAuth默认的会话有效期同步逻辑
4. 未实现Middleware，页面刷新时组件会直接判断会话状态，此时Session可能还未从JWT Token同步完成，触发错误重定向

1. 修复CredentialsProvider参数定义 #

在/lib/auth.js的CredentialsProvider中添加rememberMe字段，确保前端能正确传递该参数：

providers: [
  CredentialsProvider({
    name: "Credentials",
    credentials: {
      email: {
        label: "Email",
        type: "email",
        placeholder: "diven@gmail.com",
        validation: {
          required: true,
          pattern:
            /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/,
        },
      },
      password: { label: "Password", type: "password", placeholder: "****" },
      // 新增rememberMe字段
      rememberMe: { label: "Remember Me", type: "checkbox" },
    },
    // ... 其余authorize代码保持不变
  }),
],

2. 修复JWT和Session回调逻辑 #

调整jwt和session回调，确保JWT Token保留正确的过期时间，且Session与Token有效期同步：

callbacks: {
  async jwt({ token, user }) {
    if (user) {
      return {
        ...token,
        id: user.id,
        username: user.username,
        role: user.role,
        exp: user.exp, // 保留用户对象中的过期时间
      };
    }
    return token;
  },
  async session({ session, token }) {
    return {
      ...session,
      user: {
        ...session.user,
        id: token.id,
        username: token.username,
        role: token.role,
      },
      // 移除手动计算的expires，使用NextAuth默认生成的有效期
    };
  },
},

3. 实现Middleware路由保护 #

创建/middleware.js文件，通过NextAuth的Middleware在页面渲染前验证会话，避免刷新时的错误重定向：

import { withAuth } from "next-auth/middleware";

export default withAuth({
  pages: {
    signIn: "/sign-in",
  },
});

// 配置需要保护的路由（根据你的实际路由调整）
export const config = {
  matcher: ["/dashboard/:path*", "/profile/:path*"],
};

4. 可选：显式配置Cookie参数 #

如果生产环境中存在Cookie存储问题，可在authOptions中添加Cookie配置，确保跨环境兼容性：

export const authOptions = {
  // ... 其余配置
  cookies: {
    sessionToken: {
      name: `${process.env.NODE_ENV === "production" ? "__Secure-" : ""}next-auth.session-token`,
      options: {
        httpOnly: true,
        sameSite: "lax",
        path: "/",
        secure: process.env.NODE_ENV === "production",
      },
    },
  },
};

1. 登录时勾选"Remember Me"，检查开发者工具的Application > Cookies中是否存在next-auth.session-token
2. 刷新页面，查看useSession钩子返回的session对象是否包含正确的用户信息和有效期
3. 测试不同的"Remember Me"状态，确认会话有效期符合预期（30天/24小时）

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