React中如何获取HTTP-only Cookie解决MERN栈JWT鉴权刷新登出问题

为什么你无法获取Cookie中的Token #

你下发Cookie时配置了httpOnly: true，这是Web安全领域的标准设计，作用就是禁止前端JavaScript（包括js-cookie这类工具库）读取对应Cookie，目的是防范XSS攻击窃取身份凭证，所以你无法获取属于预期行为，并不是代码出了问题。

刷新页面自动登出的根因 #

Redux的所有状态都是存储在浏览器运行时内存中的，页面刷新后内存会被清空，Redux里存储的登录状态、用户信息等数据也会同步重置，自然就会触发自动登出，和你能不能拿到Cookie没有直接关联。

可行解决方案（按优先级排序） #

• 方案1：新增登录态校验接口（最推荐，符合安全规范）
  前端完全不需要主动获取Cookie中的Token，浏览器发送同域/符合跨域规则的请求时，会自动把符合要求的Cookie附加到请求头中传给后端，你配置的secure: true+sameSite: "none"已经支持跨域场景下的Cookie自动携带。
  你只需要在前端项目初始化（比如App根组件挂载、路由守卫触发）时，先向后端发送一次登录态校验请求，例如GET /api/auth/me，后端读取请求附带的Token Cookie，校验有效就返回当前用户信息，前端拿到返回结果后更新Redux的登录状态，即可解决刷新后登出的问题。如果请求返回未登录/Token过期，再执行登出逻辑清空状态即可。
• 方案2：搭配redux-persist使用（可选，需配合校验逻辑）
  redux-persist可以把Redux的状态持久化到本地存储（localStorage/sessionStorage等），页面刷新后会自动恢复持久化的状态，确实可以解决刷新状态丢失的问题，但要注意两个核心要点：
  1. 不要把JWT等敏感凭证持久化存储，你本身也拿不到httpOnly的Token，仅需要持久化非敏感的用户展示信息、登录状态标识即可
  2. 持久化的状态只能用作前端展示优化，每次刷新后依然要向后端发送登录态校验请求，避免出现本地存储被篡改、后端Token已经过期但前端依然显示登录的异常情况
• 方案3：关闭httpOnly配置（极不推荐）
  如果你一定要前端直接获取Token，可以把Cookie配置中的httpOnly改为false，但这会让JWT完全暴露在前端JS的可访问范围内，一旦出现XSS漏洞，攻击者可以直接窃取所有用户的身份凭证，安全风险极高，完全不建议采用。

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