NextJS 13 SSR环境下如何验证会话密钥并实现登录重定向？

问题核心 #

在Next.js 13 App Router中验证用户会话时，服务端发起的API请求无法携带Cookie到Express服务器，导致会话校验失败；旧版getServerSideProps写法不再适用，需要适配App Router的服务端逻辑，实现「已登录重定向首页，未登录留登录页」的需求。

解决方案 #

在App Router的服务端组件中，需手动从请求头获取Cookie并传递给API请求，具体修改如下：

修正后的代码 #

import { redirect } from 'next/navigation';
import { headers } from 'next/headers'; // 导入headers函数获取请求头
import Content from "@/components/content";
import LoginForm from "@/components/loginForm";
import Title from "@/components/title";

async function isLoggedIn(cookie: string) {
    try {
        const response = await api.get("/users/session-check", {
            headers: {
                Cookie: cookie // 手动传递Cookie到Express服务
            }
        });
        return response.status === 200;
    } catch (err) {
        console.log(err.message);
    }
    return false;
}

async function Page() {
    const headersList = headers();
    const cookie = headersList.get('cookie') || ''; // 从请求头中提取Cookie
    
    const isLogged = await isLoggedIn(cookie);
    if (isLogged) redirect('/');
    
    return (
        <Content>
            <div className="ml-2 my-2">
                {"NextJS is ok."}
                <Title text="Login" />
            </div>
            <LoginForm />
        </Content>
    );
}

export default Page;

关键说明 #

1. 原代码失效原因
   App Router的服务端组件运行在服务器端，不会自动继承浏览器的Cookie上下文，withCredentials: true在服务端请求中无法生效，必须手动从当前请求的headers中提取Cookie并传递给API。

2. 服务端会话验证最佳实践

   • 优先服务端处理验证：避免在客户端做会话校验（易被篡改），服务端直接判断后执行重定向，既安全又能避免页面闪烁。
   • 用中间件做全局校验：如果多个页面需要会话验证，推荐在middleware.ts中统一处理，减少重复代码：

     import { NextResponse } from 'next/server';
     import type { NextRequest } from 'next/server';
     
     export function middleware(request: NextRequest) {
         const cookie = request.headers.get('cookie');
         // 此处可调用会话校验API，或直接解析Cookie中的会话密钥（如JWT）
         const isLoggedIn = /* 你的校验逻辑 */;
     
         if (!isLoggedIn && request.nextUrl.pathname !== '/login') {
             return NextResponse.redirect(new URL('/login', request.url));
         }
         if (isLoggedIn && request.nextUrl.pathname === '/login') {
             return NextResponse.redirect(new URL('/', request.url));
         }
     }
     
     export const config = {
         matcher: ['/', '/dashboard/:path*', '/login'], // 需要校验的路由
     };
     

   • Cookie安全配置：确保会话Cookie设置HttpOnly、Secure、SameSite等安全属性，防范XSS和CSRF攻击。

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