React/NextJS 13中JWT、Refresh Token与Http-Only Cookie处理咨询

当前实现方式是否正确？ #

你的流程整体是合理的，符合常见的JWT授权模式：

• 登录请求获取短期的access token（返回在响应体中），后续授权请求通过Authorization: Bearer ${authToken}头携带，这是标准做法；
• 后端通过Http-Only Cookie存储refresh token，能有效避免XSS攻击窃取，是安全的设计。

需要注意的细节：

• 前端存储access token时，优先考虑内存存储（比如React状态、Context），其次是sessionStorage，尽量避免用localStorage（因为localStorage是持久化的，XSS攻击一旦成功就能窃取，且不会自动过期）；
• 要实现access token过期后的静默刷新逻辑：当请求返回401时，调用refresh token接口获取新的access token，再重试原请求。

是否需要将登录返回的token也保存为Cookie？ #

不需要，甚至不建议这么做：

• access token是短期有效（通常15分钟到1小时），存在前端内存或sessionStorage更灵活，能按需在授权请求中携带，避免不必要的带宽浪费；
• 如果存为Cookie，若未设置Http-Only、Secure、SameSite等安全属性，会有XSS或CSRF风险；即使设置了安全属性，浏览器会自动给所有同域请求携带Cookie，包括不需要授权的接口，没必要。

Refresh Token是否会自动随每次请求发送给服务器？ #

不是所有请求都会自动携带，只有满足以下条件时，浏览器才会自动带上Http-Only的Refresh Token Cookie：

• 请求的域名、路径和Cookie的Domain、Path属性匹配；
• 请求符合Cookie的SameSite策略（比如SameSite=Lax时，跨域POST请求不会携带；SameSite=None时需要配合Secure属性，仅在HTTPS下生效）；
• 跨域请求时，fetch需要设置credentials: 'include'，否则浏览器会忽略Cookie。

一般来说，只有调用refresh token接口时才需要这个Cookie，其他授权请求用access token即可，不需要携带refresh token。

如果返回的token是Http-Only类型，是否会自动包含在请求中，无需给fetch添加额外参数？ #

是的，但有前提条件：

• 同域请求：浏览器会自动匹配Cookie的Domain和Path，自动携带，fetch不需要额外参数；
• 跨域请求：必须在fetch中设置credentials: 'include'，同时后端要配置CORS允许携带凭证（设置Access-Control-Allow-Credentials: true，且Access-Control-Allow-Origin不能为*，必须是具体的前端域名）；
• Cookie的SameSite属性要适配请求场景：比如跨域请求需要设置SameSite=None+Secure，否则浏览器会拒绝携带。

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