如何在NextJS中阻止直接访问thank-you.tsx页面？

核心思路是通过服务器端验证提交标识，拦截未通过验证的直接访问请求，以下是几种高效方案：

方案一：使用 Middleware（推荐，Next.js 12+ 通用） #

Middleware 会在请求到达页面之前拦截处理，性能最优，无需加载页面组件即可完成校验。

1. 在项目根目录新建 middleware.ts 文件：

import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';

export function middleware(request: NextRequest) {
  // 匹配 thank-you 页面路径
  if (request.nextUrl.pathname === '/thank-you') {
    // 读取表单提交成功后设置的 cookie
    const formSubmitted = request.cookies.get('form_submitted')?.value;
    
    // 验证标识是否存在且有效（可根据需求加签名或过期校验）
    if (!formSubmitted || formSubmitted !== 'success') {
      // 重定向到表单页面（替换成你的表单路径）
      return NextResponse.redirect(new URL('/contact', request.url));
    }
  }
  
  return NextResponse.next();
}

// 指定仅对 thank-you 路径生效
export const config = {
  matcher: '/thank-you',
};

2. 在表单提交的 API 路由（或 Server Action）中设置验证 cookie：

// 示例：pages/api/submit-form.ts（Pages Router）
import type { NextApiRequest, NextApiResponse } from 'next';
import { serialize } from 'cookie';

export default function handler(req: NextApiRequest, res: NextApiResponse) {
  if (req.method === 'POST') {
    // 处理表单提交逻辑（验证、存储数据等）
    
    // 设置带有过期时间的 cookie（比如10分钟后过期）
    const cookie = serialize('form_submitted', 'success', {
      httpOnly: true, // 防止前端篡改
      secure: process.env.NODE_ENV === 'production', // 生产环境用HTTPS
      maxAge: 600, // 10分钟
      path: '/',
    });
    
    res.setHeader('Set-Cookie', cookie);
    // 重定向到 thank-you 页面
    res.redirect(302, '/thank-you');
  } else {
    res.status(405).json({ message: 'Method not allowed' });
  }
}

方案二：Pages Router 专属 - getServerSideProps #

如果项目还在使用 Pages Router，也可以直接在 thank-you.tsx 中通过 getServerSideProps 做服务器端校验：

// pages/thank-you.tsx
import type { GetServerSidePropsContext } from 'next';

export default function ThankYouPage() {
  return <h1>提交成功！感谢您的反馈</h1>;
}

export async function getServerSideProps(context: GetServerSidePropsContext) {
  const { req } = context;
  // 读取 cookie
  const formSubmitted = req.cookies.form_submitted;
  
  if (!formSubmitted || formSubmitted !== 'success') {
    return {
      redirect: {
        destination: '/contact', // 表单页面路径
        permanent: false,
      },
    };
  }
  
  return {
    props: {},
  };
}

关键注意事项 #

• 禁止纯客户端校验：仅用前端 localStorage 或状态判断会被用户轻易绕过，必须依赖服务器端验证。
• cookie 安全设置：开启 httpOnly 防止前端篡改，生产环境开启 secure 确保仅通过 HTTPS 传输，同时设置合理的过期时间避免长期有效。
• 标识防伪造：如果需要更高安全性，可以给 cookie 值加签名（比如用 crypto 模块生成哈希），验证时校验签名有效性。

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