Vue前后端实现token自动续期的方法详解

// 响应拦截器示例
axios.interceptors.response.use(
  (response) => response,
  async (error) => {
    const originalRequest = error.config;
    // 若为401且未尝试过刷新
    if (error.response.status === 401 && !originalRequest._retry) {
      originalRequest._retry = true; // 标记已尝试刷新，避免重复请求
      try {
        // 调用刷新接口（Refresh Token 通过 Cookie 自动携带）
        const { data } = await axios.post('/api/refresh-token');
        // 更新本地 Access Token
        localStorage.setItem('accessToken', data.accessToken);
        // 重试原请求（携带新 Token）
        originalRequest.headers['Authorization'] = `Bearer ${data.accessToken}`;
        return axios(originalRequest);
      } catch (refreshError) {
        // 刷新失败（Refresh Token 过期），跳转登录
        window.location.href = '/login';
        return Promise.reject(refreshError);
      }
    }
    return Promise.reject(error);
  }
);

// 后端刷新接口示例（伪代码）
@PostMapping("/api/refresh-token")
public Result refreshToken(HttpServletRequest request) {
  // 从 Cookie 获取 Refresh Token
  String refreshToken = CookieUtils.getCookieValue(request, "refreshToken");
  if (refreshToken == null) {
    return Result.fail(401, "刷新令牌不存在");
  }
  // 验证 Refresh Token（查库+验签）
  RefreshTokenEntity entity = refreshTokenMapper.selectByToken(refreshToken);
  if (entity == null || entity.getExpireTime().before(new Date())) {
    return Result.fail(401, "刷新令牌已过期");
  }
  // 生成新 Access Token 和 Refresh Token
  String newAccessToken = JwtUtils.generateAccessToken(entity.getUserId());
  String newRefreshToken = JwtUtils.generateRefreshToken(entity.getUserId());
  // 更新数据库中的 Refresh Token（旧的标记失效，存储新的）
  refreshTokenMapper.invalidateOldToken(entity.getId());
  refreshTokenMapper.insert(new RefreshTokenEntity(newRefreshToken, entity.getUserId()));
  // 返回新 Token（Access Token 放响应体，Refresh Token 放 httpOnly Cookie）
  return Result.success(Map.of(
    "accessToken", newAccessToken,
    "refreshToken", newRefreshToken // 可选，通过 Cookie 返回更安全
  ));
}

// 响应拦截器示例
axios.interceptors.response.use(
  (response) => {
    // 若响应头有新 Token，更新本地存储
    const newToken = response.headers['x-new-token'];
    if (newToken) {
      localStorage.setItem('accessToken', newToken); // 建议用 Cookie
    }
    return response;
  },
  (error) => {
    // 若 Token 已过期（401），直接跳转登录
    if (error.response?.status === 401) {
      window.location.href = '/login';
    }
    return Promise.reject(error);
  }
);

// 验证 Token 并判断是否续期（伪代码）
public String validateAndRenewToken(String token) {
  // 验证 Token 签名和有效性
  Claims claims = JwtUtils.parseToken(token);
  if (claims == null) {
    throw new TokenInvalidException();
  }
  // 计算剩余有效期（当前时间到 exp 的差值）
  long expireTime = claims.getExpiration().getTime();
  long remainingTime = expireTime - System.currentTimeMillis();
  // 若剩余时间 < 10 分钟，生成新 Token
  if (remainingTime < 10 * 60 * 1000) {
    String newToken = JwtUtils.generateAccessToken(claims.getSubject()); // 用原用户 ID 生成新 Token
    return newToken;
  }
  return null; // 无需续期
}

axios.interceptors.request.use(async (config) => {
  const token = localStorage.getItem('accessToken');
  if (!token) {
    window.location.href = '/login';
    return Promise.reject(new Error('未登录'));
  }
  // 解析 Token 中的过期时间（需前端解析 JWT，或后端返回过期时间）
  const payload = JSON.parse(atob(token.split('.')[1]));
  const expireTime = payload.exp * 1000; // JWT 的 exp 是秒级时间戳
  const remainingTime = expireTime - Date.now();
  
  // 若剩余时间 ≤ 5 分钟，先续期
  if (remainingTime <= 5 * 60 * 1000) {
    try {
      const { data } = await axios.post('/api/renew-token', { token });
      const newToken = data.newToken;
      localStorage.setItem('accessToken', newToken);
      config.headers['Authorization'] = `Bearer ${newToken}`;
    } catch (error) {
      // 续期失败，跳转登录
      window.location.href = '/login';
      return Promise.reject(error);
    }
  } else {
    config.headers['Authorization'] = `Bearer ${token}`;
  }
  return config;
});