Example code of the axios interceptor token refresh mechanism under vue

//Introduce installed axios plug-inimport axios from 'axios'
import router from '@/router';
import Vue from 'vue'
const qs = require("qs");
let _this = new Vue();
let isLock = false;
let refreshSubscribers = [];
//Judge whether the token expiresfunction isTokenExpired(token) {
 let expires_time = (token).expires_time;
 let curentTime = new Date().getTime();
 if (curentTime >= expires_time) {
  return true;
 } else {
  return false;
 }
}
//Get the Token objectfunction getToken() {
 return ("token");
}
//Push all requests into the arrayfunction subscribeTokenRefresh(cb) {
 (cb)
}

//Refresh request (the request in the refreshSubscribers array will execute itself after obtaining the new token, and use the new token to request data)function onRrefreshed(token) {
 (cb => cb(token))
}
//Refresh tokenfunction refreshToken(config, token, resolve, reject) {
 let data = { refresh_token: (token).refresh_token };
 axios({
  method: "post",
  url: "xxxxxx/refreshToken",//Refresh the interface of token  headers: {
   "Content-Type": "application/x-www-form-urlencoded",
   "Authorization": "Basic b3JkZXItc2VydmVyOjEyMzQ1Ng=="
  },
  data: (data)
 }).then(res => {
  isLock = false;//Release the lock  if ( === 101) {
   _this.$('Login status has expired, please log in again.  ');
   ("token");
   ({
    path: "/login"
   });
   return;
  }

  let expires_time = new Date().getTime() + parseInt(.expires_in * 0.8) * 1000;
  let token = (("token"));
  token.expires_time = expires_time;
  token.access_token = .access_token;
  ("token", (token));

   = 'Bearer ' + .access_token;
  resolve(config);
  //Execute the function in the array and restart the pending request  onRrefreshed(.access_token)
  //Clear the request saved in the array  refreshSubscribers = []
 }).catch(err => {
  return err;
 });
}

function request(newOptions, resolve, reject) {
 axios({
  method: ,
  url: ,
  data:  == "form" ? () : ,
  headers: 
 }).then(res => {
  if ( == 200) {
   //Here we only need to get the data returned in the data   resolve();
  } else {
   reject();
  }
 }).catch(err => {
  reject(err);
  _this.$('The service is abnormal!  ');
 })
}

(
 config => {
  let token = getToken();
  if (token) {
   //Judge whether the token expires. If it expires, please refresh the token.   if (isTokenExpired(token)) {
    //Judge whether to request refresh tokens    if (!isLock) {
     isLock = true;//isLock set true to lock to prevent dead loops.     //Use Promise to wait for refresh to complete and return to configuration information     let refresh = new Promise((resolve, reject) => {
      refreshToken(config, token, resolve, reject);
     })
     return refresh;

    } else {
     //Distinguish whether the current url is the request address for refreshing token, and if it is directly next.     if (('/logined/refreshToken') === -1) {
      //Push all requests (token)=>{...} into an array      let retry = new Promise((resolve, reject) => {
       //(token) => {...} This function is a callback function       subscribeTokenRefresh((token) => {
         = 'Bearer ' + token
        //Hang the request        resolve(config)
       })
      })
      return retry

     } else {
      return config;
     }
    }

   } else {
    return config;
   }

  } else {
   return config;
  }
 }, error => {
  return (error);
 });
const http = options => {
 return new Promise((resolve, reject) => {
  const defaultOptions = {
   type: "json"
  };
  const newOptions = {
   ...defaultOptions,
   ...options
  };
  //Headers passes json format data by default. You can also set tokens here, and each call will carry them.if (("token")) {
     = {
     // 'Authorization': 'Basic b3JkZXItc2VydmVyOjEyMzQ1Ng==',
     'content-Type':  == 'form' ? 'application/x-www-form-urlencoded;charset=UTF-8' : 'application/json;charset=UTF-8',
     'Authorization': 'Bearer ' + (("token")).access_token,
     ...
    };
   } else {
     = {
     'content-Type':  == 'form' ? 'application/x-www-form-urlencoded;charset=UTF-8' : 'application/json;charset=UTF-8',
     ...
    };
   }
  request(newOptions, resolve, reject);
 })
};

//Set request timeout = 30000
export default http

//mount the file belowimport http from '@/utils/';
 = http;

//Login to save token information interface
({
      method: "post",
      url: "/xxxxx/user",
      type: "form",
      headers: { Authorization:"Basicb3JkZXItc2VydmVyOjEyMzQ1Ng==" },
      data: {}
     }).then(function(res) {
        let expires_time =
         new Date().getTime() +
         parseInt(.expires_in * 0.8) * 1000;
         let token = ;
         token.expires_time = expires_time;
        ("token", (token));
    
      }).catch(function(err) {
       (err);
      });        

//Exit and clear token({
    method: "get",
    url: "/xxxxx/logout",
    data: {}
   }).then(function(res) {
 ("token");
  }).catch(function(err) {
     (err);
    });