axios拦截器(刷新token) 发起请求端

 参考网站：https://www.jianshu.com/p/6bc353e5f7a3；https://segmentfault.com/n/1330000013562989

 

/*是否正在刷新的标志*/
window.isRefreshing = false
/*存储请求的数组*/
let refreshSubscribers = []

/*将所有的请求都push到数组中,其实数组是[function(token){}, function(token){},...]*/
function subscribeTokenRefresh(cb) {
  refreshSubscribers.push(cb);
}
/*数组中的请求得到新的token之后自执行，用新的token去请求数据*/
function onRrefreshed(token) {
  refreshSubscribers.map(cb => cb(token));
}

//请求拦截器
instance.interceptors.request.use(request => {
  /*判断用户是否已经登录*/
  if(auth) {
    /*请求头添加token信息*/
    request.headers.Authorization = 'Bearer ' + auth.token 

    /*判断token是否即将过期*/
    /*  `/auth/current`是刷新token的接口，只有当token将要过期且不是请求刷新token的接口才会进入*/
    if(isAccessTokenExpired() && request.url !== '/auth/current') {
      /*首先所有的请求来了，我们要先判断当前是否正在刷新，如果不是，将刷新的标志置为true并请求刷新token；如果是，将请求存储到数组中*/
      if(!window.isRefreshing) {
        window.isRefreshing = true
        refreshtoken().then(res => { //refreshtoken为获取token的方法，包括window.isRefreshing = false
          /*将刷新的token替代老的token*/
          request.headers.Authorization = 'Bearer ' + res.data.data.token 
          /*更新内存的auth*/
          setAuthData()
          /*执行数组里的请求，重新发起被挂起的请求*/
          onRefreshed(res.data.data.token)
        })
        let retry = new Promise((resolve, reject) => {
           /*(token) => {...}这个函数就是cb*/
          subscribeTokenRefresh((token) => {
            request.headers.Authorization = 'Bearer ' + token
            /*将请求挂起*/
            resolve(request)
           })
        })
        return retry
      }
    }else {
        return request
    }
  }else {
    /*如果没有登录直接返回请求*/
    return request
  }
}, error => {
  return Promise.reject(error)
})