使用 Next.js 13 服务端组件获取 Cookie
最新回答
や泪漫延街
2020-10-23 21:44:38
在 Next.js 13 的服务端组件中，可通过 next/headers 提供的 cookies() 函数安全高效地获取 Cookie。以下是具体实现方法及注意事项：
核心实现步骤导入 cookies 函数从 next/headers 模块中导入 cookies 函数：
import { cookies } from 'next/headers';获取 Cookie 存储对象调用 cookies() 函数，返回一个 Cookies 对象，该对象提供 get() 方法用于按名称获取 Cookie：
const cookieStore = cookies();const myCookie = cookieStore.get('cookieName');处理 Cookie 值检查 Cookie 是否存在，若存在则获取其值：
if (myCookie) { const cookieValue = myCookie.value; console.log('Cookie value:', cookieValue); // 后续操作（如 API 请求、状态更新等）} else { console.log('Cookie not found');}
以下示例演示如何获取 authToken Cookie 并用于 API 请求：
import { cookies } from 'next/headers';import axios from 'axios';async function getData() { const cookieStore = cookies(); const token = cookieStore.get('authToken'); if (!token) { return { data: null }; } try { const response = await axios.get('http://127.0.0.1:5000/data'
, { headers: { Authorization: `Bearer ${token.value}`, }, }); return { data: response.data }; } catch (error) { console.error('Error fetching data:', error); return { data: null }; }}export default async function MyComponent() { const { data } = await getData(); if (!data) { return <p>Not authorized</p>; } return ( <div> <pre>{JSON.stringify(data, null, 2)}</pre> </div> );}注意事项安全性服务端获取 Cookie 不会暴露给客户端 JavaScript，避免 XSS 攻击风险。
使用范围限制cookies() 函数仅限服务端组件使用，客户端组件调用会报错。
类型安全cookies().get() 返回 ReadonlyCookie 对象，包含 name 和 value 属性，需正确处理：
const token = cookieStore.get('authToken');console.log(token?.name); // Cookie 名称console.log(token?.value); // Cookie 值性能优化避免频繁调用 cookies()，可缓存 Cookie 值以减少开销。
错误处理始终检查 get() 返回是否为 undefined，处理 Cookie 不存在的情况：
const userPref = cookieStore.get('userPref');if (!userPref) { // 默认值或提示}
通过 next/headers 的 cookies() 函数，开发者可在 Next.js 13 服务端组件中安全、高效地访问 Cookie。其优势包括：
- 安全性：避免客户端暴露敏感 Cookie。
- 简洁性：API 设计直观，易于集成。
- 性能：服务端处理减少网络传输开销。
遵循上述示例和注意事项，可快速实现 Cookie 管理，提升应用可靠性。
热门标签
