React无法读取Cookie中accessToken 如何根据其存在性设置登录状态

核心原因 #

你无法读取到目标Cookie的核心原因是**accessToken Cookie被设置了HttpOnly属性**，这是浏览器的原生安全机制，所有带HttpOnly标记的Cookie都会禁止前端JavaScript通过document.cookie或任何第三方Cookie库读取，目的是防范XSS攻击窃取敏感登录凭证，属于正常的安全设计。

另外如果你的前后端跨域部署，Cookie的Domain、SameSite属性不匹配也会导致前端读不到对应Cookie。 #

方案1：调整Cookie配置允许前端读取（存在XSS风险） #

如果确定要在前端直接读取Cookie判断登录状态，可以按如下步骤调整：

• 找到服务端设置accessToken Cookie的逻辑，移除HttpOnly配置项
• 确认Cookie属性和前端域名匹配：
  • 同域名部署场景下，SameSite可设置为Lax或Strict，Domain配置为当前站点域名即可
  • 跨域部署场景下，SameSite必须设置为None，同时开启Secure属性（仅HTTPS环境生效），Domain配置为前后端的公共父级域名

调整完成后可通过如下代码读取Cookie并设置登录状态：

原生JS读取示例 #

function getCookie(name) {
  const value = `; ${document.cookie}`;
  const parts = value.split(`; ${name}=`);
  if (parts.length === 2) return parts.pop().split(';').shift();
}

// 页面初始化时判断登录状态
useEffect(() => {
  const token = getCookie('accessToken');
  if (token) setLogin(true);
}, [])

react-cookies读取示例 #

import cookie from 'react-cookies';

useEffect(() => {
  const token = cookie.load('accessToken');
  if (token) setLogin(true);
}, [])

方案2：保留HttpOnly安全属性，通过后端接口校验（更推荐） #

HttpOnly是防范登录凭证被窃取的重要安全手段，不建议随意关闭，可通过如下逻辑实现登录状态判断：

1. 服务端新增登录状态校验接口，例如GET /api/auth/check，接口逻辑为读取请求自动携带的accessToken Cookie，校验有效性后返回{isLogin: true/false}
2. 前端全局开启请求携带Cookie配置：
   • axios配置：axios.defaults.withCredentials = true
   • fetch配置：请求时添加参数credentials: 'include'
3. 前端应用初始化时调用校验接口，根据返回值设置登录状态：

useEffect(() => {
  const checkLoginStatus = async () => {
    try {
      const res = await axios.get('/api/auth/check');
      res.data.isLogin && setLogin(true);
    } catch (err) {
      setLogin(false);
    }
  }
  checkLoginStatus();
}, [])

你现有的CORS配置已经满足跨域携带Cookie的要求，无需额外调整。

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