VUE pc端封装请求响应拦截并刷新token

VUE pc端刷新token

PC端添加请求拦截响应并设置无感知刷新token

import axios from 'axios'
import { MessageBox, Message } from 'element-ui'
import store from '@/store'
import { getToken ,setRefreshToken,getRefreshToken} from '@/utils/auth'
import router from '@/router'
import { refreshData } from '@/api/user'

/* 是否有请求正在刷新token */
window.isRefreshing = false
/* 被挂起的请求数组 */
let refreshSubscribers = []

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

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

const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API, 
  timeout: 5000 
})

function computedTime() {
  let expiresTime = JSON.parse(localStorage.getItem('registerTime'));
  if (!expiresTime) return false;
  let currentTime = Date.parse(new Date()) / 1000;
  // // 600秒后即将过期,true则需要刷新 
  return expiresTime - currentTime <= -600
}
service.interceptors.request.use(async (config) => {
  if (config.url !== '/Authorization/RefreshToken') {//获取token的接口不进行拦截
    console.log("cookie中的最新token " + getRefreshToken())
      const token =  getRefreshToken();
    if (token) {
            config.headers['Authorization'] = token
          }
    // 判断token是否过期，如已过期就进行刷新token
    if (computedTime()) {
      if (!window.isRefreshing) {
        window.isRefreshing = true;
        let r = JSON.parse(getToken());
        console.log(r)
        if (!r) return;
        refreshData({token:r.refreshToken}).then((data) => {
            // 更换刷新时间
            localStorage.setItem('registerTime', Date.parse(new Date()) / 1000);
          window.isRefreshing = false;
          console.log(data)
          setRefreshToken(data.data)
          onRrefreshed(data.data);
          refreshSubscribers = [];
          // resolve()
        }).catch(err => {
          console.log(err);
          // router.replace({
          //   path: '/login'
          // })
          store.dispatch('user/logout')
          router.push(`/login?redirect=${this.$route.fullPath}`)
        })

      }
      /* 把请求(token)=>{....}都push到一个数组中 */
      let retry = new Promise((resolve, reject) => {
        /* (token) => {...}这个函数就是回调函数 */
        subscribeTokenRefresh((token) => {
          config.headers.Authorization = token
          /* 将请求挂起 */
          resolve(config)
        })
      })
      return retry
    } else {
      return config
    }
  } else {
    return config
  }
}, (error) => {
  return Promise.reject(error);
})


// 响应拦截
service.interceptors.response.use(res => {
  if (res.status == 200 && res.data && res.data.code == 200) {
    return res.data;
  }
  if(res.data.code == 5000){
        alert("token过期")
        // router.push("/login")
        return res.data;
  }

  return res.data;
}, err => {
//==============  错误处理  ====================
   if (err && err.response) {
        switch (err.response.status) {
            case 400: err.message = '请求错误(400)'; break;
            case 401: err.message = '未授权，请重新登录(401)'; break;
            case 403: err.message = '拒绝访问(403)'; break;
            case 404: err.message = '请求出错(404)'; break;
            case 408: err.message = '请求超时(408)'; break;
            case 500: err.message = '服务器错误(500)'; break;
            case 501: err.message = '服务未实现(501)'; break;
            case 502: err.message = '网络错误(502)'; break;
            case 503: err.message = '服务不可用(503)'; break;
            case 504: err.message = '网络超时(504)'; break;
            case 505: err.message = 'HTTP版本不受支持(505)'; break;
            default: err.message = `连接出错(${err.response.status})!`;
        }
    } else {
        err.message = '连接服务器失败!'
    }
  // Message.error( {message: err.message } )
  return Promise.reject(err);
})





export default service