本文详解 web 应用中 jwt 访问令牌（access token）与刷新令牌（refresh token）的安全分发、前端存储、自动续期及无感登录流程，涵盖 token 返回方式、请求携带规范、过期处理与拦截器集成等核心实践。
在现代前后端分离的 Web 应用中，基于 JWT 的 Token 认证已成为主流方案。用户成功登录后，服务端应以 JSON 格式返回一对令牌：
{
"access_token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...",
"refresh_token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9..."
}前端（如 React、Vue 或 Angular）应将 access_token 存入 sessionStorage（推荐，关闭标签页即销毁，更安全），或在明确需要“记住我”场景下存入 localStorage；而 refresh_token 必须严格保密，建议仅存于 httpOnly + Secure + SameSite=Strict 的 Cookie 中（由后端写入），切勿存入前端可读的 storage——这是防范 XSS 泄露的关键防线。
每次向受保护 API 发起请求时，前端需在 HTTP Authorization 头中携带访问令牌：
Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...
当用户关闭浏览器后再次访问网站，若 access_token 未过期，可直接从 sessionStorage（已丢失）或 localStorage（若启用持久化）中读取并使用；但更健壮的做法是：首次加载时尝试用 refresh_token（从 Cookie 自动携带）静默换取新 access_token。此时服务端需验证 refresh_token 的有效性与绑定关系，并签发新的短期 access_token。
为实现自动化处理，强烈推荐在前端框架中集成 HTTP 拦截器（如 Angular 的 HttpInterceptor、Axios 的 interceptors.request.use() 或 React 中的自定义 Hook 封装）。拦截器可统一完成以下任务：
- 自动附加 Authorization 头；
- 捕获 401 响应 → 触发刷新逻辑（调用 /auth/refresh 接口）；
- 刷新成功后重放原请求；
- 刷新失败（如 refresh_token 过期或被撤销）→ 清除所有凭证，跳转至登录页。
⚠️ 注意事项：
- access_token 应设置较短有效期（如 15–30 分钟），降低泄露风险；
- refresh_token 需服务端持久化存储（含用户 ID、过期时间、是否已撤销），并绑定设备指纹/IP（可选增强）；
- 前端绝不应自行解析或校验 JWT 签名——仅依赖服务端验证；
- 所有 Token 相关接口必须强制 HTTPS，禁用明文传输。
通过以上设计，即可在保障安全性的同时，实现用户“关闭浏览器后再次打开仍保持登录态”的无缝体验。
