Next.js App Router：中间件数据传递至页面组件的实践指南

// src/middleware.ts
import { NextRequest, NextResponse } from "next/server";
// 假设 getUser 是一个异步函数，用于根据 sessionToken 获取用户数据
import { getUser } from "./lib/getUser"; 

export async function middleware(request: NextRequest) {
  const sessionToken = request.cookies.get('session-token');

  // 1. 认证检查：如果不存在会话令牌，则重定向到登录页
  if (!sessionToken) {
    return NextResponse.redirect(new URL('/', request.url));
  }

  // 2. 获取用户数据：根据会话令牌调用后端 API 获取用户详情
  const userResponse = await getUser(sessionToken.value);

  // 3. 错误处理：如果用户数据获取失败，也重定向
  if (userResponse.status !== 200) {
    return NextResponse.redirect(new URL('/', request.url));
  }

  const userJson = await userResponse.json(); // 获取到的用户 JSON 数据，例如 { _id: "...", email: "..." }

  // 4. 创建新的请求头对象，并添加自定义数据
  // HTTP 头的值必须是字符串。对于 JSON 对象，需要先进行字符串化。
  // 注意：出于安全和性能考虑，应只传递必要且非敏感的信息，或对敏感数据进行加密。
  const requestHeaders = new Headers(request.headers);
  requestHeaders.set("x-user-data", JSON.stringify(userJson));

  // 5. 通过 NextResponse.next() 将修改后的请求头传递给下一个处理链
  // 这样，后续的 page.tsx 组件就能访问到这个自定义头。
  return NextResponse.next({
    request: {
      headers: requestHeaders,
    },
  });
}

// 配置中间件的匹配路径
export const config = {
  matcher: "/cfa/:path*", // 匹配所有以 /cfa 开头的路径
};

// src/app/cfa/page.tsx
import { headers } from "next/headers"; // 从 next/headers 导入 headers 函数

// 定义用户数据接口，以便进行类型安全操作
interface UserData {
  _id: string;
  email: string;
  // 根据你的用户数据结构添加更多字段
}

export default async function CfaPage() {
  // 1. 在服务器组件中获取所有请求头
  const allHeaders = headers();

  // 2. 获取中间件设置的自定义用户数据头
  // 注意：HTTP 头键是大小写不敏感的，但通过 headers().get() 访问时，通常会转换为小写。
  const userDataHeader = allHeaders.get("x-user-data");

  let user: UserData | null = null;
  if (userDataHeader) {
    try {
      // 3. 解析 JSON 字符串以获取原始用户数据对象
      user = JSON.parse(userDataHeader) as UserData;
      console.log("从中间件获取的用户数据:", user);
    } catch (error) {
      console.error("解析用户数据失败:", error);
    }
  }

  return (
    <main className="p-4">
      <h1>欢迎来到受保护的区域</h1>
      {user ? (
        <div>
          <p>用户ID: {user._id}</p>
          <p>邮箱: {user.email}</p>
          {/* 根据 user 数据渲染其他内容 */}
        </div>
      ) : (
        <p>无法加载用户数据，请确保已登录。</p>
      )}
      {/* 你的其他页面内容，例如表单、列表等 */}
      {/* <FormCreateLocation /> */}
    </main>
  );
}