前端单点登录token过期前端处理

1.token过期时间是8h,起一个setInterval间隔30m刷新一次，判断时间超过7.5h请求后台接口刷新token（会存在时间差,不靠谱）

setToken('token',{token:'qwe',date:new Date().getTime()})
this.timer = setInterval(function(){
     console.log(getToken('token'))
     if(getToken('token')){
          let data = JSON.parse(getToken('token'))
          let time = data.date;
          let now_time = new Date().getTime();
          console.log(now_time - time)
          if((now_time - time)>20*1000){
             console.log('here')
             setToken('token',{token:'qwe',date:new Date().getTime()})
          }

     }
},6*1000)

 2.在axios拦截器里对将要过期的token 的进行刷新

        1.在发送请求前处理

        2.在发送请求后处理

    考虑点：1.多个请求同时发送token已过期处理

                   2.登录注册token为空(发送请求前)

我自己采用的在发送请求后处理

import axios from 'axios'
import {Message} from 'element-ui'
import { setToken,getToken } from '../utils/auth'

axios.defaults.withCredentials = true
axios.defaults.baseURL = process.env.VUE_APP_URL
axios.defaults.headers = {
  'X-Token':getToken('token') //设置header
}

// 添加请求拦截器
axios.interceptors.request.use(function (config) {
  console.log(config)
  // 在发送请求之前做些什么
  return config;
}, function (error) {
  // 对请求错误做些什么
  return Promise.reject(error);
});

// 添加响应拦截器
axios.interceptors.response.use(function (response) {
  console.log(response)
  if(response.data.code==415){
    // token 过期
    checkStatus(response)
  }
  // 对响应数据做点什么
  return response;
}, function (error) {
  // 对响应错误做点什么
  console.log(error)
  return Promise.reject(error);
});
let isRefreshing = true; // 默认状态
function checkStatus(response){
  // 刷新token的函数,这需要添加一个开关，防止重复请求
  if(isRefreshing){
    refreshTokenRequst()
  }
  isRefreshing = false;
  // 将当前的请求保存在观察者数组中
  if(!isRefreshing){
    // 正在刷新token，将返回一个未执行resolve的promise
    const retryOriginalRequest = new Promise((resolve) => {
      addSubscriber(()=> {
        console.log(response.config)
        response.config.headers['X-Token'] = getToken('token');
        response.config.baseURL = '';
        resolve(axios(response.config))
      })
    });
    return retryOriginalRequest;
  }
}
// 刷新token接口
function refreshTokenRequst(){
  // axios.get().then(res=>{
  //   console.log(res)
  //   setToken()
  //   onAccessTokenFetched()
  //   isRefreshing = true;
  // })
  setTimeout(()=>{
    setToken('token','$2y$10$G82RnwrGOuvqIpIR0JeH3O0N3B5m.fDCoCvFkWEgA9zE68BL09tTy')
    isRefreshing = true;
    onAccessTokenFetched()
  },2000)
}
// 观察者
let subscribers = [];
// 已经刷新了token，将所有队列中的请求进行重试
function onAccessTokenFetched() {
    subscribers.forEach((callback)=>{
        callback();
    })
    subscribers = [];
}
// 将resolve放进队列，用一个函数形式来保存，等token刷新后直接执行
function addSubscriber(callback) {
    subscribers.push(callback)
}

参考链接   https://segmentfault.com/a/1190000020986592?utm_source=tag-newest