react如何接受cookie

在 React 中接收 Cookie 的方法

使用 document.cookie 直接读取
document.cookie 会返回当前域名下的所有 Cookie 字符串，格式为 key=value 的分号分隔形式。可以通过以下方式解析：

const cookies = document.cookie.split(';').reduce((acc, cookie) => {
  const [key, value] = cookie.trim().split('=');
  return { ...acc, [key]: value };
}, {});

使用第三方库（如 js-cookie）

安装 js-cookie 库可以简化 Cookie 操作：

npm install js-cookie

在组件中使用：

import Cookies from 'js-cookie';

// 读取 Cookie
const userToken = Cookies.get('token');

结合 HTTP 请求自动处理

如果 Cookie 是通过 HTTP 请求（如登录接口）设置的，确保请求配置中启用了 credentials：

fetch('/api/login', {
  credentials: 'include' // 允许携带 Cookie
});

服务端渲染（Next.js）的特殊处理

在 Next.js 的 getServerSideProps 中，可以通过上下文对象访问请求头中的 Cookie：

export async function getServerSideProps(context) {
  const cookies = context.req.headers.cookie;
  // 解析逻辑同 document.cookie
}

注意事项

• HttpOnly Cookie：标记为 HttpOnly 的 Cookie 无法通过 JavaScript 读取，仅限服务端使用。
• 安全域限制：浏览器仅允许访问当前域名或父域下的 Cookie（遵循同源策略）。
• 过期时间：读取时不会自动过滤已过期的 Cookie，需手动检查。