当前位置：首页 > React

react如何接受cookie

2026-02-12 07:58:04React

在 React 中接收 Cookie

React 本身不直接处理 Cookie，但可以通过 JavaScript 的 document.cookie 或第三方库（如 js-cookie）来读取 Cookie 数据。以下是几种常见方法：

使用 `document.cookie` 原生 API

通过 document.cookie 可以获取当前域名下的所有 Cookie，返回的是一个字符串，格式为 key=value 的分段组合。

const cookies = document.cookie; // 获取所有 Cookie
console.log(cookies); // 输出类似 "token=abc123; theme=dark"

如果需要解析特定 Cookie 的值，可以编写辅助函数：

function getCookie(name) {
  const cookies = document.cookie.split(';');
  for (let cookie of cookies) {
    const [key, value] = cookie.trim().split('=');
    if (key === name) return value;
  }
  return null;
}

const token = getCookie('token'); // 获取名为 "token" 的 Cookie

使用 `js-cookie` 库

js-cookie 是一个轻量级库，简化了 Cookie 操作。首先安装库：

npm install js-cookie

在组件中使用：

import Cookies from 'js-cookie';

// 读取 Cookie
const userToken = Cookies.get('token'); 
console.log(userToken); // 输出值或 undefined

// 读取所有 Cookie
const allCookies = Cookies.get();
console.log(allCookies); // 输出对象 { token: "abc123", theme: "dark" }

在服务端渲染（SSR）中处理 Cookie

如果使用 Next.js 等框架，服务端可以通过请求头（如 req.headers.cookie）获取 Cookie：

// Next.js API 路由示例
export default function handler(req, res) {
  const cookies = req.headers.cookie; // 获取请求中的 Cookie
  res.status(200).json({ cookies });
}

客户端通过 getServerSideProps 传递：

react如何接受cookie

export async function getServerSideProps(context) {
  const { req } = context;
  const cookies = req.headers.cookie || '';
  return { props: { cookies } };
}