frontend-admin/src/plugins/axiosApp.js

import Vue from "vue";
import axios from "axios";
import { loadProgressBar } from "axios-progress-bar";
import cachingGet from "./axiosCache";
import { getKeyToken, removeKeyToken } from "../auth/auth";

// Full config:  https://github.com/axios/axios#request-config
// axios.defaults.baseURL = process.env.baseURL || process.env.apiUrl || '';
// axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
// axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

let config = {
  // baseURL: process.env.baseURL || process.env.apiUrl || ""
  timeout: 60 * 1000, // Timeout
  withCredentials: true, // Check cross-site Access-Control
};

const _axiosApp = axios.create(config);

/**
 * B. new token lifecycle
 * 1. 任何接口地址都尝试加上 key & token (第三方请求，单独做新的$http)
 * 2. 如果没有 key & token，就当做这是无需认证的api
 * 3. 做好token失效的处理，在interceptors.response 统一删除
 * 4. key & token 由外部管理，不在此插件管理。一般是在登录成功后设置。
 * xx. 额外：通过js-cookie将key等存入cookie
 */

_axiosApp.interceptors.request.use(
  function(config) {
    if (config.url.endsWith("Login") === false) {
      const [wk_token, wk_key] = getKeyToken();
      if (wk_token) {
        config.headers.common["token"] = wk_token;
        config.headers.common["key"] = wk_key;
      }
    }
    return config;
  },
  function(error) {
    // Do something with request error
    Vue.prototype.$notify({
      showClose: true,
      message: error,
      type: "error",
    });
    return Promise.reject(error);
  }
);

// Add a response interceptor
_axiosApp.interceptors.response.use(
  response => {
    return response;
  },
  error => {
    if (!error.response) {
      // "Network Error" 网络不通，直接返回

      Vue.prototype.$notify({
        showClose: true,
        message: "网络连接异常，请检查网络设置。",
        type: "error",
      });
      return Promise.reject(error);
    }
    // 这里是返回状态码不为200时候的错误处理
    let status = error.response.status;

    // 登录失效 跳转登录页面
    if (status == 403 || status == 401) {
      if (
        window.___lastInvalidDate === undefined ||
        window.___lastInvalidDate < Date.now() - 300
      ) {
        Vue.prototype.$notify({
          showClose: true,
          message: "登录失效，请重新登录！",
          type: "error",
        });
        window.___lastInvalidDate = Date.now();
      }
      removeKeyToken();
      return Promise.reject(error);
    } else if (status == 405) {
      Vue.prototype.$notify({
        showClose: true,
        message: "没有权限！",
        type: "error",
      });
      return Promise.reject(error);
    } else if (status == 502) {
      Vue.prototype.$notify({
        showClose: true,
        message: "服务器异常(502)！",
        type: "error",
      });
      return Promise.reject(error);
    }

    if (status != 200) {
      const data = error.response.data;
      if (data && data.desc) {
        Vue.prototype.$notify({
          showClose: true,
          message: data.desc,
          type: "error",
        });
      } else {
        Vue.prototype.$notify({
          showClose: true,
          message: "未定义异常: " + JSON.stringify(data, 2),
          type: "error",
        });
      }
      return Promise.reject(error);
    }
  }
);

_axiosApp.get = cachingGet(_axiosApp.get, []);
loadProgressBar(_axiosApp);

Plugin.install = function(Vue) {
  Object.defineProperties(Vue.prototype, {
    $http: {
      get() {
        return _axiosApp;
      },
    },
  });
};

Vue.use(Plugin);

export default Plugin;

export const httpApp = _axiosApp;