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

// middleware.ts
import { NextRequest, NextResponse } from "next/server";
import { getUser } from "./lib/getUser"; // 假设这是您的用户获取逻辑

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

  // 如果没有会话令牌，重定向到登录页
  if (!sessionToken) {
    return NextResponse.redirect(new URL("/", request.url));
  }

  // 尝试获取用户数据
  const userRequest = await getUser(sessionToken.value);

  // 如果用户获取失败，重定向到登录页
  if (userRequest.status !== 200) {
    return NextResponse.redirect(new URL("/", request.url));
  }

  const userJson = await userRequest.json(); // 假设 userJson 包含 _id 和 email

  // 创建一个新的 Headers 对象，复制原始请求头
  const requestHeaders = new Headers(request.headers);

  // 将用户 ID 作为自定义请求头添加到新的 Headers 对象中
  // 注意：请求头通常用于传递字符串数据。如果需要传递复杂对象，请将其序列化为 JSON 字符串。
  requestHeaders.set("X-User-ID", userJson._id);
  requestHeaders.set("X-User-Email", userJson.email);
  // 也可以传递整个用户 JSON，但要确保其大小在合理范围内
  // requestHeaders.set("X-User-Data", JSON.stringify(userJson));

  // 返回 NextResponse.next()，并将修改后的请求头注入到后续的请求中
  return NextResponse.next({
    request: {
      headers: requestHeaders,
    },
  });
}

export const config = {
  matcher: "/cfa/:path*", // 匹配所有 /cfa 路径下的请求
};

// app/cfa/page.tsx
import { headers } from "next/headers"; // 从 next/headers 导入 headers 函数
import { FormCreateLocation } from "@/components/forms/FormCreateLocation";
import { Location } from "@/components/resources/Location";

export default async function Home() {
  const requestHeaders = headers(); // 获取所有请求头

  // 访问中间件设置的自定义请求头
  // 注意：HTTP 请求头是大小写不敏感的，但通常在访问时会被转换为小写。
  const userId = requestHeaders.get("x-user-id");
  const userEmail = requestHeaders.get("x-user-email");
  // 如果传递了完整的 JSON 字符串
  // const userDataString = requestHeaders.get("x-user-data");
  // const userData = userDataString ? JSON.parse(userDataString) : null;

  console.log("User ID from middleware:", userId);
  console.log("User Email from middleware:", userEmail);
  // console.log("User Data from middleware:", userData);

  // 根据获取到的用户数据进行页面渲染
  // 例如，可以根据 userId 从数据库获取更详细的用户信息
  // 或者直接使用 userEmail 来展示个性化内容

  return (
    <main className="p-4">
      <h1>欢迎, {userEmail || "访客"}!</h1>
      <FormCreateLocation />
      <div className="p-4">
        <h2>选择一个地点</h2>
        <ul>
          {/* 示例地点 */}
          <Location _id="0333333333" name="Chick-fil-A Highway 22" number="03444" />
          <Location _id="33222222222" name="Chick-fil-A Midtown" number="03253" />
        </ul>
      </div>
    </main>
  );
}