Next.js SSR模式下如何保护_next目录中未授权可访问的用户数据？

针对你遇到的未登录用户可直接访问/_next/data/下JSON数据文件的问题，以下是几种实用的解决方案：

1. 在getServerSideProps中添加权限验证 #

当用户直接访问/_next/data/路径的JSON文件时，Next.js会自动执行对应页面的getServerSideProps函数。因此，在这个函数里加入登录状态校验是最直接的防护手段：

export async function getServerSideProps(context) {
  // 根据你的鉴权机制检查用户登录状态（示例用自定义校验函数，可替换为session/token/cookie校验）
  const isAuthenticated = await checkUserAuthentication(context.req);
  
  if (!isAuthenticated) {
    return {
      redirect: {
        destination: '/login', // 未登录则重定向到登录页
        permanent: false,
      },
    };
  }

  // 原有数据获取逻辑
  const res = await fetch('你的用户数据接口');
  const users = await res.json();

  // 保留缓存头配置
  context.res.setHeader('Cache-Control', 'no-cache, no-store, max-age=0, must-revalidate');

  return {
    props: { users },
  };
}

这样，未登录用户访问JSON文件时，会被直接重定向到登录页，无法获取敏感数据。

2. 使用Next.js中间件（Middleware）全局拦截 #

如果需要对所有/_next/data/路径做统一权限校验，可借助Next.js 12+提供的Middleware功能，无需在每个页面重复编写鉴权逻辑：

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

export function middleware(request: NextRequest) {
  // 匹配所有_next/data下的请求
  if (request.nextUrl.pathname.startsWith('/_next/data/')) {
    // 校验用户身份（示例读取auth cookie，替换为你的鉴权方式）
    const authToken = request.cookies.get('auth_token');
    if (!authToken || !verifyTokenValidity(authToken.value)) {
      // 未通过校验，返回403或重定向
      return new NextResponse('Unauthorized', { status: 403 });
      // 或者重定向：return NextResponse.redirect(new URL('/login', request.url));
    }
  }
  return NextResponse.next();
}

// 配置匹配规则
export const config = {
  matcher: '/_next/data/:path*',
};

3. 过滤敏感数据，仅返回页面所需字段 #

即使数据被意外访问，也可以通过减少返回的数据量降低风险：在getServerSideProps中只返回页面渲染必需的用户字段，而非全部用户数据：

export async function getServerSideProps(context) {
  // 鉴权逻辑...
  
  const res = await fetch('你的用户数据接口');
  const fullUsers = await res.json();
  
  // 过滤敏感字段，仅保留页面需要的内容
  const safeUsers = fullUsers.map(user => ({
    id: user.id,
    name: user.name,
    // 不返回手机号、邮箱、权限等级等敏感字段
  }));

  return {
    props: { users: safeUsers },
  };
}

4. 辅助验证：检查请求来源（可选） #

作为额外的防护层，可以检查请求的Referer或Origin头，确保请求来自你的网站（注意：该方式可被伪造，仅作为辅助手段）：

export async function getServerSideProps(context) {
  const referer = context.req.headers.referer;
  if (!referer || !referer.startsWith('https://你的域名.com')) {
    return {
      notFound: true, // 返回404隐藏数据存在性
    };
  }
  
  // 鉴权和数据获取逻辑...
}

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