后端设置Cookie或API下发Token存Cookie后，React.js前端如何读取？

方法一：使用原生JavaScript（无需额外依赖） #

浏览器原生提供document.cookie来访问Cookie，但它返回的是所有Cookie拼接成的字符串，需要自行解析目标值。比如要获取存在Cookie里的Token，可以封装一个简单的工具函数：

// 获取指定名称的Cookie
const getCookie = (cookieName) => {
  const cookieStr = `; ${document.cookie}`;
  const cookieParts = cookieStr.split(`; ${cookieName}=`);
  
  // 匹配到目标Cookie则截取对应值，否则返回null
  if (cookieParts.length === 2) {
    return cookieParts.pop().split(';').shift();
  }
  return null;
};

// 调用函数获取Token（替换为你的Token Cookie名称）
const authToken = getCookie('auth_token');
console.log(authToken);

方法二：使用第三方库（更简洁可靠） #

如果项目需要频繁操作Cookie，推荐用js-cookie轻量级库，它已处理好各种边界情况：

1. 安装依赖：

npm install js-cookie
# 或使用yarn
yarn add js-cookie

2. 在React组件中导入并使用：

import Cookies from 'js-cookie';

// 直接获取指定名称的Token
const authToken = Cookies.get('auth_token');
console.log(authToken);

关键注意事项 #

• HttpOnly属性限制：如果后端设置Cookie时开启了HttpOnly，前端JavaScript无法读取该Cookie（这是浏览器防XSS的安全机制）。若必须用HttpOnly存储Token，前端无法直接获取，需通过后端接口返回Token，或让后端在渲染页面时将Token注入全局变量。
• Domain和Path匹配：后端设置Cookie的Domain和Path必须与前端页面的域名、路径一致，否则前端无法读取到该Cookie。

内容的提问来源于stack exchange，提问作者Djela Srca