SPA中Cookie管理Token的核心是安全设、不读取、后端清、防滥用：必须HttpOnly+Secure+SameSite=Lax设置，前端通过/auth/status接口校验登录态，登出时后端Set-Cookie清空，避免同时存Cookie和localStorage。
在单页面应用（SPA）中，用 Cookie 管理用户 Token 状态，核心是让 Token 安全、可控地随请求自动携带，并与前端路由和状态同步。关键不在于“存哪里”，而在于“怎么设、怎么读、怎么清、怎么防滥用”。
Cookie 设置必须带安全属性
后端发 Token 时，应通过 Set-Cookie 响应头写入 HTTP-only Cookie，而不是前端 JS 直接操作 document.cookie。这样可避免 XSS 直接窃取 Token。
推荐设置：
- HttpOnly：禁止 JavaScript 读取，阻断 XSS 提取
- Secure：仅 HTTPS 传输，防止明文泄露
- SameSite=Strict 或 Lax：防范 CSRF（推荐 Lax，兼顾体验与安全）
- Path=/：确保所有路由下都可发送
- Max-Age 或 Expires：明确过期时间，避免长期有效
前端无需读取 Cookie，但要感知登录状态
由于 HttpOnly Cookie 无法被 JS 读取，前端判断登录态不能靠解析 Cookie，而应通过一个轻量 API（如 /api/auth/status）发起请求，由服务端校验 Cookie 中的 Token 并返回用户信息或 401 状态。
立即学习“Java免费学习笔记（深入）”；
Java项目代码review工具。分析Git变更+完整调用链路上下文，推断业务需求，进行多维度评分和分类汇总，生成完整PRD文档。包含细粒度Java代码审查清单（Null安全、异常处理、Streams、并发、equals/hashCode、资源管理、API设计、性能、MyBatis/ORM、事务边界、SQL/DD...
常见做法：
- 路由守卫（如 Vue Router 的
beforeEach或 React Router 的useEffect + redirect）中调用该接口 - 接口返回 401 时，清除本地 UI 状态（如 Vuex/Pinia 中的 user 字段），跳转登录页
- 避免轮询，只在页面进入或 Token 可能过期时校验（例如刷新页面、长时间无操作后）
登出时必须后端主动清除 Cookie
前端调用登出接口（如 POST /api/auth/logout），后端需返回 Set-Cookie 头，将 Token Cookie 的 Max-Age=0 或 Expires=过去时间，并设置相同域名、路径、SameSite 等属性，确保浏览器立即删除。
注意：
- 不要只清前端内存状态（如 localStorage），否则下次请求仍会带上有效 Cookie
- 登出接口本身应接受任意身份（包括未登录），避免因 Cookie 无效导致登出失败
- 若使用 JWT 存于 Cookie，后端通常不做主动吊销，依赖过期时间；如需即时失效，需搭配 Redis 黑名单等机制
跨子域或前后端分离部署时注意 Domain 配置
若前端域名是 app.example.com，后端 API 在 api.example.com，Cookie 默认不会跨域发送。此时后端设 Cookie 需指定 Domain=.example.com（注意开头的点），且前端请求需开启 credentials: 'include'（fetch）或 withCredentials: true（Axios）。
补充提醒：
- Chrome 95+ 对第三方 Cookie 更严格，
SameSite=Lax是当前兼容性与安全性较平衡的选择 - 开发环境若用 localhost，注意
Secure属性在非 HTTPS 下会被浏览器忽略，可临时关闭或用 https://local.test 绑 host 测试 - 不要把 Token 同时存在 Cookie 和 localStorage —— 这既没提升安全性，反而增加泄露面
