react如何获取cookie

获取Cookie的方法

在React中获取Cookie可以通过原生JavaScript的document.cookie实现。以下是几种常见的方法：

使用原生JavaScript获取Cookie

const cookies = document.cookie;
console.log(cookies); // 输出所有Cookie字符串

解析Cookie为对象

如果需要将Cookie字符串解析为键值对对象：

function getCookies() {
  return document.cookie.split(';').reduce((cookies, cookie) => {
    const [name, value] = cookie.trim().split('=');
    cookies[name] = decodeURIComponent(value);
    return cookies;
  }, {});
}

const cookieObj = getCookies();
console.log(cookieObj.token); // 获取名为token的Cookie值

使用第三方库

对于更复杂的Cookie操作，可以使用js-cookie库：

安装js-cookie

npm install js-cookie

获取Cookie示例

import Cookies from 'js-cookie';

const token = Cookies.get('token'); // 获取指定Cookie
console.log(token);

服务器端渲染(SSR)场景

在Next.js等框架中，服务器端需通过请求头处理Cookie：

Next.js中获取请求Cookie

export async function getServerSideProps(context) {
  const { req } = context;
  const cookies = req.headers.cookie; // 从请求头获取Cookie
  return { props: { cookies } };
}

注意事项

• 浏览器环境下直接使用document.cookie仅能获取非HttpOnly的Cookie。
• 涉及敏感信息时建议设置HttpOnly标志增强安全性。
• 跨域请求需配置credentials: 'include'（如使用fetch）。