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）。
