Vue如何优雅处理Token过期并自动续期

// 请求拦截
axios.interceptors.request.use(config => {
  const accessToken = localStorage.getItem('access_token')
  if (accessToken) {
    config.headers.Authorization = `Bearer ${accessToken}`
  }
  return config
})

// 响应拦截
axios.interceptors.response.use(
  response => response,
  async error => {
    const originalRequest = error.config
    // 如果是401（Token过期）且未重试过
    if (error.response.status === 401 && !originalRequest._retry) {
      originalRequest._retry = true
      try {
        // 用 refresh_token 换新的 access_token
        const res = await axios.post('/refresh-token', {
          refresh_token: localStorage.getItem('refresh_token')
        })
        const { access_token, refresh_token } = res.data
        localStorage.setItem('access_token', access_token)
        localStorage.setItem('refresh_token', refresh_token)
        // 重新发之前的请求
        originalRequest.headers.Authorization = `Bearer ${access_token}`
        return axios(originalRequest)
      } catch (refreshError) {
        // refresh_token 也过期了，跳登录页
        window.location.href = '/login'
      }
    }
    return Promise.reject(error)
  }
)

// 检查Token剩余时间
function checkTokenExpiry() {
  const token = localStorage.getItem('access_token')
  if (!token) return false
  
  const payload = JSON.parse(atob(token.split('.')[1])) // 解析JWT
  const expiresIn = payload.exp * 1000 - Date.now()
  
  // 如果还剩5分钟过期，就续期
  if (expiresIn < 5 * 60 * 1000) {
    refreshToken()
  }
}

// 定时检查（每10分钟一次）
setInterval(checkTokenExpiry, 10 * 60 * 1000)

function refreshToken() {
  const refreshToken = localStorage.getItem('refreshToken');
  // 发送请求到后端，获取新的Access Token
  fetch('/api/refreshToken', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({ refreshToken })
  })
  .then(response => response.json())
  .then(data => {
    // 将新的Access Token更新到本地存储中
    localStorage.setItem('accessToken', data.accessToken);
  })
  .catch(error => {
    console.error('刷新Token失败：', error);
  });
}

function renewToken() {
  const accessToken = localStorage.getItem('accessToken');
  const expireTime = localStorage.getItem('expireTime');
  // 计算AccessToken的剩余有效时间
  const remainTime = expireTime - Date.now();
  // 如果AccessToken的剩余有效时间小于5分钟，则发送续期请求
  if (remainTime < 5 * 60 * 1000) {
    // 发送续期请求到后端，更新AccessToken的过期时间
    fetch('/api/renewToken', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({ accessToken })
    })
    .then(response => response.json())
    .then(data => {
      // 将新的过期时间更新到本地存储中
      localStorage.setItem('expireTime', data.expireTime);
    })
    .catch(error => {
      console.error('续期Token失败：', error);
    });
  }
}

// 定时检查AccessToken的过期时间
setInterval(renewToken, 60 * 1000);