msyj-admin-org/src/main.js

import Vue from "vue";
import axios from "axios";

import App from "./App.vue";
import router from "./router";
import store from "./store";
import GLOBAL from "./config";
import globalVuePlugins from "./plugins/globalVuePlugins";

// https://github.com/RobinCK/vue-ls
import VueLocalStorage from "vue-ls";
import ViewUI from "view-design";
import "view-design/dist/styles/iview.css";
import "./assets/styles/index.less";
// regist v-chart
import "./plugins/VueCharts";

Vue.use(ViewUI, { size: "large" });
ViewUI.Message.config({
  duration: 3
});
ViewUI.Notice.config({
  duration: 3
});
Vue.use(VueLocalStorage, { storage: "session" });
Vue.use(globalVuePlugins);

Vue.prototype.GLOBAL = GLOBAL;

Vue.config.productionTip = false;

// route interceptor
// router.beforeEach((to, from, next) => {
//   const token = Vue.ls.get("token");
//   if (to.meta.noRequire) {
//     // 不需要登录的页面
//     if (token) {
//       // 当前状态是已登录
//       ViewUI.Notice.info({ title: "您已经登录，已自动跳转到主页", duration: 2 });
//       next({ name: "Home" });
//     } else {
//       next();
//     }
//   } else {
//     // 需要登录的路由
//     if (token) {
//       next();
//     } else {
//       // 登录失效的处理
//       Vue.ls.clear();
//       // Vue.ls.remove("token");
//       // Vue.ls.remove("user");
//       next({ name: "Login" });
//     }
//   }
// });

// axios interceptors
var load = "";
// 同一时间有多个请求时，会形成队列。在第一个请求创建loading，在最后一个响应关闭loading
var queue = [];
axios.interceptors.request.use(
  config => {
    // 显示loading提示
    if (!queue.length) {
      load = ViewUI.Message.loading({
        content: "Loading...",
        duration: 0
      });
    }

    queue.push(1);

    // 为请求地址添加全局domain
    if (config.url.indexOf("http://") < 0) {
      config.url = GLOBAL.domain + config.url;
    }

    // 为请求头添加token信息
    let token = Vue.ls.get("token");
    if (token) {
      config.headers["Authorization"] = token;
    }

    // 设置延迟时效
    config.timeout = GLOBAL.timeout;
    return config;
  },
  error => {
    // 关闭loading提示
    // 串联并发请求，延时处理是为防止多个loading实例闪屏。
    setTimeout(() => {
      queue.shift();
      if (!queue.length) load();
    }, 100);
    return Promise.reject(error);
  }
);
axios.interceptors.response.use(
  response => {
    // 关闭loading提示
    setTimeout(() => {
      queue.shift();
      if (!queue.length) load();
    }, 100);
    return response;
  },
  error => {
    // 关闭loading提示
    setTimeout(() => {
      queue.shift();
      if (!queue.length) load();
    }, 100);
    return Promise.reject(error);
  }
);

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount("#app");