前端 Token 管理与最佳实践

奋斗吧程序媛2025-12-06 10:26

从存储到安全
1. 引言

Token 的作用：身份验证、权限控制、会话管理。

常见场景：登录、角色切换、Token 续签、过期处理。

问题背景：从实际代码中发现的 setToken 冗余问题引出主题。
2. Token 的生命周期

(1) 生成与存储

后端生成：登录接口返回 Token（如 JWT）。

前端存储：

localStorage / sessionStorage ：简单但易受 XSS 攻击。
Cookie （HttpOnly + Secure）：更安全，但需注意跨域。

代码示例：

Javascript

// 存储 Token（基于 Cookie）

复制代码

 export function setToken(token) {
   Cookies.set('token', token, { expires: 1 }); // 1 小时过期
 }

(2) 携带与验证

请求拦截器：自动附加 Token 到请求头。

Javascript

复制代码

axios.interceptors.request.use(config => {
    config.headers.Authorization = getToken();
    return config;
});

后端校验：验证 Token 合法性及过期时间。

(3) 续签与过期
续签机制：

后端设置token过期时间一小时，如果一小时之后用户还有操作，后端通过接口的响应头返回新 Token（ set-authorization ）。前端续签部分代码展示：

复制代码

service.interceptors.response.use(
  async res => {

    let setAuthorization = res.headers['set-authorization']
    if(setAuthorization){
      setToken(setAuthorization)
    }
}}

过期处理：

①移除token；

②重置路由（初始化路由，避免登录后出现路由重复的警告）；

③跳转登录页（有可能在这一步之前需要获取重定向路径，登录直接跳转重定向的路径）；

④移除动态路由（清除动态添加的路由，避免切换账号时路由权限错误）；