Next.js路由访问限制的极简实现方案问询

1. 当前路径token方案的安全性（token不泄露前提下） #

只要能确保用作路径的token完全不泄露（不通过代码提交、日志、用户转发等方式外流），这个方案在低风险场景下没有根本性安全问题。

Next.js 默认不会在客户端暴露完整的路由列表：

• 对于 Pages Router 的静态生成（SSG）或服务器端渲染（SSR）页面，客户端只会加载当前访问页面的代码，不会获取到未访问路由的路径信息；
• 除非你主动在前端代码中输出路由列表，或者使用了生成公开站点地图的工具（如 next-sitemap），否则外部无法知晓这些隐藏路径的存在。

2. 用环境变量配置路径token的示例 #

步骤1：配置环境变量 #

在项目根目录创建 .env.local 文件（将该文件加入 .gitignore，避免提交到仓库），添加token：

PROTECTED_PATH_TOKEN=aabbccddeeff112233

步骤2：页面路由验证（Pages Router） #

将页面放在动态路由目录 /pages/[token]/page1.js，通过 getServerSideProps 验证token：

export async function getServerSideProps(context) {
  const { token } = context.params;
  // 验证token是否匹配环境变量
  if (token !== process.env.PROTECTED_PATH_TOKEN) {
    return {
      redirect: {
        destination: '/404',
        permanent: false,
      },
    };
  }
  return { props: {} };
}

export default function Page1() {
  return <div>受保护的Page1内容</div>;
}

步骤3：API路由验证（Pages Router） #

同样创建动态API路由 /pages/api/[token]/route1.js，在handler中验证：

export default function handler(req, res) {
  const { token } = req.query;
  if (token !== process.env.PROTECTED_PATH_TOKEN) {
    return res.status(403).json({ message: '禁止访问' });
  }
  // 正常处理API逻辑
  res.status(200).json({ data: '已授权访问' });
}

3. 客户端可能泄露token时的简易路由保护方案 #

推荐使用HTTP Basic 认证，这和 .htaccess 的认证逻辑类似，无需数据库，代码量极小，且敏感信息可通过环境变量存储不进版本控制。

实现示例（使用Next.js Middleware） #

1. 在 .env.local 中添加认证信息：

BASIC_AUTH_USER=your_user
BASIC_AUTH_PASS=your_secure_password

2. 在项目根目录创建 middleware.js：

import { NextResponse } from 'next/server';

export function middleware(request) {
  const basicAuth = request.headers.get('authorization');
  const url = request.nextUrl;

  // 验证路径是否需要保护
  const protectedPaths = ['/page1', '/page2', '/api/route1', '/api/route2'];
  if (!protectedPaths.some(path => url.pathname.startsWith(path))) {
    return NextResponse.next();
  }

  // 验证Basic Auth信息
  if (basicAuth) {
    const authValue = basicAuth.split(' ')[1];
    const [user, pwd] = Buffer.from(authValue, 'base64').toString().split(':');
    if (user === process.env.BASIC_AUTH_USER && pwd === process.env.BASIC_AUTH_PASS) {
      return NextResponse.next();
    }
  }

  // 验证失败，返回认证要求
  url.pathname = '/api/auth-challenge';
  return NextResponse.rewrite(url);
}

// 指定要应用中间件的路径
export const config = {
  matcher: ['/page1/:path*', '/page2/:path*', '/api/route1/:path*', '/api/route2/:path*'],
};

3. 创建 /pages/api/auth-challenge.js 路由返回认证提示：

export default function handler(req, res) {
  res.setHeader('WWW-Authenticate', 'Basic realm="Protected Area"');
  res.status(401).json({ message: '请输入认证信息' });
}

这个方案中，所有验证逻辑在服务器端完成，客户端无法获取到认证凭证，只需将 .env.local 加入 .gitignore，即可安全公开代码仓库。

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