React中如何检测HttpOnly Cookie（如accessToken）是否存在

首先明确核心限制：HttpOnly 标记的Cookie从设计层面就禁止前端JavaScript通过document.cookieAPI读取，不存在前端直接读取判断的可行方法，所有试图绕过这个限制的操作要么违反浏览器安全规则，要么会破坏Cookie本身的防XSS窃取能力。

以下是生产环境可用的两种实现方案，根据业务场景选择即可：

• 后端接口校验方案（推荐，适用于所有权限相关判断场景）
  这是最符合安全规范的通用方案，不需要前端折腾Cookie读取：

1. 后端提供一个轻量的登录态校验接口，例如/api/auth/check-status，接口不需要接收任何业务参数
2. 前端在需要判断登录态的时机（比如页面初始化、路由跳转前）向这个接口发请求，浏览器会自动把同域下的所有Cookie（包括HttpOnly的accessToken）带到请求头里
3. 后端校验请求头里的accessToken是否存在、是否在有效期内，直接返回结构化的判断结果，比如{ "hasValidToken": true }
4. 前端根据接口返回的结果直接编写对应的业务逻辑即可

• 前端标记辅助方案（仅适用于非敏感的UI状态判断）
  如果不想额外发校验请求，只是用来判断要不要展示登录按钮这类非权限类的UI逻辑，可以用双Cookie标记的方案：

1. 后端在设置HttpOnly的accessToken时，同步设置一个和accessToken同生命周期、同作用域的非HttpOnly普通Cookie，比如命名为accessToken_exists，值固定设为1即可
2. 用户退出登录、accessToken过期失效时，后端要同步把这个标记Cookie设为过期删除
3. 前端直接通过document.cookie判断accessToken_exists是否存在，就能得到对应的状态

注意：这个方案有明确的局限性，普通Cookie用户可以手动篡改，只能用来判断“是否曾经下发过accessToken”，不能证明当前Token是合法有效的，所有涉及用户权限、敏感数据拉取的判断绝对不能依赖这个标记，必须走后端接口校验。

避坑提醒 #

• 别浪费时间尝试从前端直接读HttpOnly Cookie，这是浏览器强制的安全限制，没有任何前端层面的绕过方法
• 不要为了判断方便直接去掉accessToken的HttpOnly标记，会直接导致站点遭遇XSS攻击时用户Token被轻易窃取，引发大规模账号安全问题

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