六、axiosインターセプタの拡張機能

A、トークンの有効期限が切れた契約

依頼=> =>更新トークン=>更新の成功を有効期限が切れていることが見いださ=>再び自動的に実行依頼

図示のように：

コードは以下の通りであります：

/**
 * Created by superman on 17/2/16.
 * http配置
 */
//import {Toast} from 'vant';
import axios from 'axios'
import store from '../vuex/store'
import { Toast } from 'vant';
// axios 配置

// 创建一个axios实例
const instance = axios.create({
  //baseURL: 'http://localhost:65194/api',// api 的 base_url
  baseURL: '/api',  // api 即上面 vue.config.js 中配置的地址
  timeout: 10000,     // request timeout  设置请求超时时间
  withCredentials: true, // 是否允许带cookie这些
})

// 请求拦截器
instance.interceptors.request.use(config => {
  if (store.state.accessToken) {
    config.headers.Authorization = `Bearer ${store.state.accessToken}`;
  }
  return config;
}, error => {  //请求错误处理
  return Promise.reject(error)
});


// 响应拦截器
instance.interceptors.response.use(response => {
  return response
}, error => {
  if (error.response) {
    switch (error.response.status) {
      case 401:
        if (error.response.headers["token-expired"]) {
          var config = error.response.config; //1、response.config就是原请求的配置
          console.log("token过期");
          //通过刷新token获取请求token
         return axios({  //2、当token已过期,则axios内部进行一次刷新token和重试。对调用者来说，axios内部的刷新token是一个黑盒，是无感知的
            url: "api/Home/ReadRefreshToken", // 后台接口
            method: "post", // 请求方式  
            params: {
              token: store.state.refreshToken,
            }
          })
            .then(response => {
              store.dispatch("LOGIN", response.data.data); //登录
              console.log("刷新token请求成功:", response.data);
              //3、重试当前请求并返回promise
              return instance(config);
            })
            .catch(error => {
              console.log("刷新token请求失败:", error);
            }).finally(() => {
              console.warn("请求刷新完成",config);
            })
        } else {
          Toast({
            message: '登录过期，请重新登录',
            duration: 1000,
            forbidClick: true
          });
        }
        break;
      default:
        Toast({
          message: error.response.data.message,
          duration: 1500,
          forbidClick: true
        });
    }
  }
  return Promise.reject(error)
})

export default instance

222222222