如何在Vue.js前端复用Django后端API生成的Cookie做身份验证

问题核心原因 #

• 标记了httpOnly属性的Cookie天生无法被前端JavaScript读取/修改，这是浏览器内置的安全机制，设计初衷就是避免XSS攻击窃取身份凭证，没有任何方法可以绕过该限制让document.cookie获取到该Cookie。
• 浏览器发起同域名请求时会自动携带httpOnly Cookie，所以后端能正常获取到对应JWT，这个表现是符合预期的。

前端身份校验与路由守卫的实现方案 #

你不需要强制读取Cookie就能实现需求，推荐以下两种生产环境可用的方案：

方案1：调用后端身份校验接口（最安全） #

后端新增一个轻量的状态校验接口，例如GET /api/auth/me：

1. 路由守卫触发时，前端发起该接口请求，浏览器会自动携带httpOnly的JWT Cookie
2. 后端直接复用你现有的JWTAuthentication中间件做校验，校验通过返回当前用户的公开信息（昵称、头像等），校验失败返回401状态码
3. 前端根据接口返回结果判断是否放行路由，该方案完全不会暴露身份凭证，安全性最高。

方案2：登录接口返回非敏感登录标识 #

后端在登录接口返回Cookie的同时，在响应体中返回非敏感的登录状态标记：

1. 前端将标记存入localStorage/sessionStorage，路由守卫直接读取该标记做基础拦截
2. 注意该方案仅能做前端路由的基础过滤，所有业务接口的真实权限校验必须依赖后端的JWT逻辑，避免本地存储被恶意篡改。

不推荐方案：移除httpOnly属性 #

你可以修改后端生成Cookie的逻辑，去掉httpOnly标记，此时前端就能通过document.cookie读取到JWT，但该方案会大幅提升XSS攻击窃取令牌的风险，生产环境不建议使用。

内容的提问来源于stack exchange，提问作者Li Xiu Ying