如何限制Next.js成功页面禁止直接通过URL访问？

1. 服务端会话验证（推荐） #

利用服务端存储的加密会话信息（比如Cookie）来验证用户是否真的完成了提交操作，安全性最高。

• 表单提交成功后，在服务端设置一个加密的临时Cookie（比如success_verified=true），并设置较短的过期时间（比如5分钟）。
• 在成功页面的服务端逻辑（getServerSideProps或Server Component）中检查该Cookie：
  • 存在且有效则正常渲染页面，同时清除Cookie防止重复访问；
  • 不存在则直接重定向到首页或表单页面。

示例代码（使用getServerSideProps）：

// pages/success.js
export async function getServerSideProps(context) {
  const successCookie = context.req.cookies.success_verified;
  // 实际场景建议用加密后的Cookie值，避免前端篡改
  if (!successCookie || successCookie !== 'encrypted_true_value') {
    return {
      redirect: {
        destination: '/',
        permanent: false,
      },
    };
  }
  // 验证后清除Cookie
  context.res.setHeader('Set-Cookie', 'success_verified=; Path=/; Max-Age=0');
  return { props: {} };
}

export default function SuccessPage() {
  return <h1>提交成功！</h1>;
}

2. URL令牌+服务端验证 #

通过生成唯一的一次性令牌，在表单提交成功后重定向到带令牌的成功页面，服务端验证令牌有效性，适合需要关联具体提交记录的场景（比如订单成功页）。

• 表单提交成功时，服务端生成唯一令牌，存储到数据库或缓存（如Redis）并设置过期时间。
• 重定向到/success?token=xxx，成功页面在服务端检查令牌是否存在且有效：
  • 有效则渲染页面并删除令牌；
  • 无效则重定向。

示例代码（Server Component）：

// app/success/page.js
import { redirect } from 'next/navigation';
import { checkAndDeleteToken } from '@/lib/token-service';

export default async function SuccessPage({ searchParams }) {
  const token = searchParams.token;
  if (!token || !(await checkAndDeleteToken(token))) {
    redirect('/');
  }
  return <h1>订单提交成功！</h1>;
}

3. 本地存储（仅适用于非敏感场景） #

如果不需要严格的安全性，可使用本地存储临时标记提交状态，但注意用户可手动修改本地存储内容，不适合支付、敏感数据场景。

• 表单提交成功后，设置localStorage.setItem('submitted_success', 'true')。
• 在成功页面的客户端组件中检查该值：
  • 存在则正常显示并移除该值；
  • 不存在则重定向。

示例代码：

// app/success/page.js
'use client';
import { useEffect } from 'react';
import { useRouter } from 'next/navigation';

export default function SuccessPage() {
  const router = useRouter();
  useEffect(() => {
    const submitted = localStorage.getItem('submitted_success');
    if (!submitted) {
      router.push('/');
    } else {
      localStorage.removeItem('submitted_success');
    }
  }, [router]);
  return <h1>表单提交成功！</h1>;
}

4. 重定向头信息验证 #

利用Next.js重定向时的临时头信息，仅允许通过提交后的重定向访问成功页面。

• 表单提交成功后，服务端重定向到/success并设置临时头（如X-Success-Verified: true）。
• 在成功页面的客户端组件中读取该头信息：
  • 存在则渲染页面；
  • 不存在则重定向。

示例代码：

// app/api/submit/route.js
export async function POST(request) {
  // 处理表单提交逻辑
  const formData = await request.formData();
  // 提交成功后重定向
  return redirect('/success', {
    headers: {
      'X-Success-Verified': 'true',
    },
  });
}

// app/success/page.js
'use client';
import { useEffect } from 'react';
import { useRouter } from 'next/navigation';
import { headers } from 'next/headers';

export default function SuccessPage() {
  const router = useRouter();
  const successHeader = headers().get('X-Success-Verified');
  
  useEffect(() => {
    if (!successHeader) {
      router.push('/');
    }
  }, [router, successHeader]);
  
  return <h1>提交成功！</h1>;
}

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