axios token过期刷新重新续约

最新推荐文章于 2025-05-23 01:16:22 发布

weixin_40281246

最新推荐文章于 2025-05-23 01:16:22 发布

阅读量1.6k

点赞数

CC 4.0 BY-SA版权

分类专栏： axios 文章标签： Vue axios

本文链接：https://blog.youkuaiyun.com/weixin_40281246/article/details/94444663

本文介绍了在Vue项目中如何使用axios处理token过期的问题，通过设置拦截器实现token自动刷新和重新获取，确保用户无感知地保持会话状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

window.isRefreshing = false;
// 存储请求的数组
let refreshSubscribers = [];

/*将所有的请求都push到数组中*/
function subscribeTokenRefresh(cb) {
  refreshSubscribers.push(cb);
}

// 数组中的请求得到新的token之后自执行，用新的token去请求数据
function onRrefreshed(token) {
  refreshSubscribers.map(cb => cb(token));
}

// 判断token是否过期
function isRefreshTokenExpired() {
  let oData = localStorage.getItem('time'); // 本地token存储的时间
  let nDta = new Date().getTime();
  let stamp = nDta - oData;
  let minutes = parseInt((stamp % (1000 * 60 * 60)) / (1000 * 60));
  return minutes >= 110? true : false;
}

// 刷新token的请求
function getRefreshToken() {
    return axios.get(url, {params: {
        data
    }}).then((res) => {
        return Promise.resolve(res.data)
    }) 
}

axios.interceptors.request.use(config => {
    const token = localStorage.getItem('token')
    /*判断token是否存在*/
    if (token) {
      // console.log(token)
      config.headers.token = token
      config.headers['Content-Type'] = 'application/json;c