下14：如何在中间件中设置cookie并在根布局中获取它

Question

反应：18.2.0 下一个”：14.0.3

我的目标是从一开始就保证带有会话ID的cookie的存在。我为此使用中间件。

export async function middleware(req: nextrequest) {
   const response = nextresponse.next();
    const ensuredsessionid = await fetchensuresession(
      req.nexturl.origin,
      currentsessionid,
    );
    console.log(`ensured sessionid for url ${req.url}`, ensuredsessionid);
    response.cookies.set("sessionid", ensuredsessionid, {
      path: "/",
      httponly: true,
      samesite: "strict",
      secure: true,
    });

    return response;
    }

我想在我的根layout.tsx中使用cookie，但它是未定义的。然而，我可以在浏览器的开发工具中看到它，尽管它在布局中未定义。如果我刷新页面，下次我会立即在我的layout.tsx中获取cookie。

import { cartprovider } from "@storefront/shell/cart/cartcontext";
import { cookies } from "next/headers";

interface props {
 children: react.reactnode;
}

export default async function rootlayout({ children }: props) {
 const session = cookies().get("sessionid");

 console.log("session-Id", session);

 return (
   <cartprovider sessionid={session?.value}>{children}</cartprovider>
 );
}

我希望 cookie 最初就在那里，因为中间件出现在layout.tsx 之前。但它不在那里。 Next.js 日志：

✓ Ready in 1773ms
✓ Compiled /src/middleware in 178ms (163 modules)
✓ Compiled /api/ensure-session in 455ms (33 modules)
ensured sessionId for url https://localhost:3000/en f142d570-93a7-4503-a52e-7f9fe580b89f
 ○ Compiling /[lang] ...
 ✓ Compiled /[lang] in 2.9s (3517 modules)
Session-Id undefined
 ○ Compiling /api/trpc/[trpc] ...
 ✓ Compiled /api/trpc/[trpc] in 573ms (2083 modules)

有人可以告诉我我对 next.js cookies 工作原理的理解中缺少什么吗？

Answer 1

当中间件设置 cookie 后，在同一请求响应周期中，rsc 立即尝试读取该 cookie，但它尚未定义，因为 cookie 刚刚在发回的响应上设置。

这意味着客户端的浏览器尚未收到带有新 cookie 的响应，因此，cookie 值无法在呈现 rsc 的请求标头中发送回服务器。

当我离开或刷新页面时，浏览器会向服务器发送新请求。这次，请求包含与该域相关的所有 cookie