vue+axios 实现30分钟不操作清除登录状态返回登录页

首先需要后端配合将token过期时间设置为30分钟

• 将登录获取的token和时间存在缓存中

this.$localData('set', 'tokenData', {
  token: res.data.token, //登录成功后返回的token
  tokenTime: Date.parse(new Date()) / 1000  //获取token的时间
})

• axios request拦截器中

let $http = axios.create({ timeout: 10000 }) // 创建axios实例
window.isReresh = false //防重
$http.interceptors.request.use(
  (config) => {
    let tokenData = localData('get', 'tokenData')
    if (tokenData && tokenData.token) {
      config.headers.Authorization = tokenData.token
      let nowTime = Date.parse(new Date()) / 1000
      //时间间隔（分钟）
      let timeSpan = ((nowTime - tokenData.tokenTime) / 60).toFixed(0) 
      // 距离上次操作25-30分钟内时刷新token
      if (timeSpan > 25 && timeSpan <= 30 && !window.isReresh) { 
        window.isReresh = true
        // 请求api刷新token
        refreshToken().then((res) => {
          localData('set', 'tokenData', {
            token: res.data,
            tokenTime: Date.parse(new Date()) / 1000,
          })
          config.headers.Authorization = res.data
          window.isReresh = false
        }).catch(() => {
          window.isReresh = false
        })
      }
    }
    return config;
  },
  (err) => {
    return Promise.reject(err);
  }
);

• axios response拦截器中

//响应拦截器即异常处理
$http.interceptors.response.use(
  (response) => {
    if (response.data.statusCode == "301") {
      Message.error({
        message: '由于您长时间未操作，登录状态已失效',
      })
      router.replace({
        path: "/login", // 重新回到登陆页
      });
    }
    return response;
  },
  (err) => {
    return Promise.resolve(err.response);
  }
);