1

src/page/index/index.vue

@@ -1,26 +1,27 @@
 <template>
-  <div class="avue-contail" :class="{'avue--collapse':isCollapse}">
+  <div class="avue-contail" :class="{ 'avue--collapse': isCollapse }">
     <!-- <div class="avue-header">
       顶部导航栏
       <top ref="top"/>
     </div> -->
+    <div style="height: 64px"></div>
     <div class="avue-layout">
       <div class="avue-left">
         <!-- 左侧导航栏 -->
-        <sidebar/>
+        <sidebar />
       </div>
       <div class="avue-main">
         <!-- 顶部标签卡 -->
-        <tags/>
+        <tags />
         <transition name="fade-scale">
           <search class="avue-view" v-show="isSearch"></search>
         </transition>
         <!-- 主体视图层 -->
         <div style="height:100%;overflow-y:auto;overflow-x:hidden;" id="avue-view" v-show="!isSearch">
           <keep-alive>
-            <router-view class="avue-view" v-if="$route.meta.keepAlive"/>
+            <router-view class="avue-view" v-if="$route.meta.keepAlive" />
           </keep-alive>
-          <router-view class="avue-view" v-if="!$route.meta.keepAlive"/>
+          <router-view class="avue-view" v-if="!$route.meta.keepAlive" />
         </div>
       </div>
     </div>
@@ -29,71 +30,70 @@
 </template>
 
 <script>
-  import {mapGetters} from "vuex";
-  import tags from "./tags";
-  import search from "./search";
-  import top from "./top/";
-  import sidebar from "./sidebar/";
-  import admin from "@/util/admin";
-  import {validatenull} from "@/util/validate";
-  import {calcDate} from "@/util/date.js";
-  import {getStore} from "@/util/store.js";
+import { mapGetters } from 'vuex'
+import tags from './tags'
+import search from './search'
+import top from './top/'
+import sidebar from './sidebar/'
+import admin from '@/util/admin'
+import { validatenull } from '@/util/validate'
+import { calcDate } from '@/util/date.js'
+import { getStore } from '@/util/store.js'
 
-  export default {
-    components: {
-      top,
-      tags,
-      search,
-      sidebar
-    },
-    name: "index",
-    provide() {
-      return {
-        index: this
-      };
-    },
-    data() {
-      return {
-        //搜索控制
-        isSearch: false,
-        //刷新token锁
-        refreshLock: false,
-        //刷新token的时间
-        refreshTime: ""
-      };
-    },
-    created() {
-      //实时检测刷新token
-      this.refreshToken();
+export default {
+  components: {
+    top,
+    tags,
+    search,
+    sidebar
+  },
+  name: 'index',
+  provide() {
+    return {
+      index: this
+    }
+  },
+  data() {
+    return {
+      //搜索控制
+      isSearch: false,
+      //刷新token锁
+      refreshLock: false,
+      //刷新token的时间
+      refreshTime: ''
+    }
+  },
+  created() {
+    //实时检测刷新token
+    this.refreshToken()
+  },
+  mounted() {
+    this.init()
+  },
+  computed: mapGetters(['isMenu', 'isLock', 'isCollapse', 'website', 'menu']),
+  props: [],
+  methods: {
+    showCollapse() {
+      this.$store.commit('SET_COLLAPSE')
     },
-    mounted() {
-      this.init();
+    // 初始化
+    init() {
+      this.$store.commit('SET_SCREEN', admin.getScreen())
+      window.onresize = () => {
+        setTimeout(() => {
+          this.$store.commit('SET_SCREEN', admin.getScreen())
+        }, 0)
+      }
+      this.$store.dispatch('FlowRoutes').then(() => {})
     },
-    computed: mapGetters(["isMenu", "isLock", "isCollapse", "website", "menu"]),
-    props: [],
-    methods: {
-      showCollapse() {
-        this.$store.commit("SET_COLLAPSE");
-      },
-      // 初始化
-      init() {
-        this.$store.commit("SET_SCREEN", admin.getScreen());
-        window.onresize = () => {
-          setTimeout(() => {
-            this.$store.commit("SET_SCREEN", admin.getScreen());
-          }, 0);
-        };
-        this.$store.dispatch("FlowRoutes").then(() => {
-        });
-      },
-      //打开菜单
-      openMenu(item = {}) {
-        this.$store.dispatch("GetMenu", item.id).then(data => {
-          if (data.length !== 0) {
-            this.$router.$avueRouter.formatRoutes(data, true);
-          }
-          //当点击顶部菜单后默认打开第一个菜单
-          /*if (!this.validatenull(item)) {
+    //打开菜单
+    openMenu(item = {}) {
+      this.$store.dispatch('GetMenu', item.id).then(data => {
+        if (data.length !== 0) {
+          this.$router.$avueRouter.formatRoutes(data, true)
+        }
+        //当点击顶部菜单后默认打开第一个菜单
+        /*if (!this.validatenull(item)) {
             let itemActive = {},
               childItemActive = 0;
             if (item.path) {
@@ -113,31 +113,31 @@
               }, itemActive.meta)
             });
           }*/
-
-        });
-      },
-      // 定时检测token
-      refreshToken() {
-        this.refreshTime = setInterval(() => {
-          const token = getStore({
-            name: "token",
+      })
+    },
+    // 定时检测token
+    refreshToken() {
+      this.refreshTime = setInterval(() => {
+        const token =
+          getStore({
+            name: 'token',
             debug: true
-          }) || {};
-          const date = calcDate(token.datetime, new Date().getTime());
-          if (validatenull(date)) return;
-          if (date.seconds >= this.website.tokenTime && !this.refreshLock) {
-            this.refreshLock = true;
-            this.$store
-              .dispatch("refreshToken")
-              .then(() => {
-                this.refreshLock = false;
-              })
-              .catch(() => {
-                this.refreshLock = false;
-              });
-          }
-        }, 10000);
-      }
+          }) || {}
+        const date = calcDate(token.datetime, new Date().getTime())
+        if (validatenull(date)) return
+        if (date.seconds >= this.website.tokenTime && !this.refreshLock) {
+          this.refreshLock = true
+          this.$store
+            .dispatch('refreshToken')
+            .then(() => {
+              this.refreshLock = false
+            })
+            .catch(() => {
+              this.refreshLock = false
+            })
+        }
+      }, 10000)
     }
-  };
+  }
+}
 </script>

src/router/axios.js

@@ -5,16 +5,16 @@
  * isSerialize是否开启form表单提交
  * isToken是否需要token
  */
-import axios from 'axios';
-import store from '@/store/';
-import router from '@/router/router';
-import {serialize} from '@/util/util';
-import {getToken} from '@/util/auth';
-import {Message} from 'element-ui';
-import website from '@/config/website';
-import {Base64} from 'js-base64';
-import NProgress from 'nprogress';
-import 'nprogress/nprogress.css';
+import axios from "axios";
+import store from "@/store/";
+import router from "@/router/router";
+import { serialize } from "@/util/util";
+import { getToken } from "@/util/auth";
+import { Message } from "element-ui";
+import website from "@/config/website";
+import { Base64 } from "js-base64";
+import NProgress from "nprogress";
+import "nprogress/nprogress.css";
 
 //默认超时时间
 axios.defaults.timeout = 60000;
@@ -26,55 +26,64 @@ axios.defaults.validateStatus = function (status) {
 axios.defaults.withCredentials = true;
 // NProgress 配置
 NProgress.configure({
-  showSpinner: false
+  showSpinner: false,
 });
 //http request拦截
-axios.interceptors.request.use(config => {
-  //开启 progress bar
-  NProgress.start();
-  const meta = (config.meta || {});
-  const isToken = meta.isToken === false;
-  config.headers['Authorization'] = `Basic ${Base64.encode(`${website.clientId}:${website.clientSecret}`)}`;
-  //让每个请求携带token
-  if (getToken() && !isToken) {
-    config.headers[website.tokenHeader] = 'bearer ' + JSON.parse(window.localStorage('saber-userInfo')).content.access_token
+axios.interceptors.request.use(
+  (config) => {
+    //开启 progress bar
+    NProgress.start();
+    const meta = config.meta || {};
+    const isToken = meta.isToken === false;
+    config.headers["Authorization"] = `Basic ${Base64.encode(
+      `${website.clientId}:${website.clientSecret}`
+    )}`;
+    //让每个请求携带token
+    if (getToken() && !isToken) {
+      config.headers[website.tokenHeader] = "bearer " + getToken();
+    }
+    //headers中配置text请求
+    if (config.text === true) {
+      config.headers["Content-Type"] = "text/plain";
+    }
+    //headers中配置serialize为true开启序列化
+    if (config.method === "post" && meta.isSerialize === true) {
+      config.data = serialize(config.data);
+    }
+    return config;
+  },
+  (error) => {
+    return Promise.reject(error);
   }
-  //headers中配置text请求
-  if (config.text === true) {
-    config.headers["Content-Type"] = "text/plain";
-  }
-  //headers中配置serialize为true开启序列化
-  if (config.method === 'post' && meta.isSerialize === true) {
-    config.data = serialize(config.data);
-  }
-  return config
-}, error => {
-  return Promise.reject(error)
-});
+);
 //http response 拦截
-axios.interceptors.response.use(res => {
-  //关闭 progress bar
-  NProgress.done();
-  //获取状态码
-  const status = res.data.code || res.status;
-  const statusWhiteList = website.statusWhiteList || [];
-  const message = res.data.msg || res.data.error_description || '未知错误';
-  //如果在白名单里则自行catch逻辑处理
-  if (statusWhiteList.includes(status)) return Promise.reject(res);
-  //如果是401则跳转到登录页面
-  if (status === 401) store.dispatch('FedLogOut').then(() => router.push({path: '/login'}));
-  // 如果请求为非200否者默认统一处理
-  if (status !== 200) {
-    Message({
-      message: message,
-      type: 'error'
-    });
-    return Promise.reject(new Error(message))
+axios.interceptors.response.use(
+  (res) => {
+    //关闭 progress bar
+    NProgress.done();
+    //获取状态码
+    const status = res.data.code || res.status;
+    const statusWhiteList = website.statusWhiteList || [];
+    const message = res.data.msg || res.data.error_description || "未知错误";
+    //如果在白名单里则自行catch逻辑处理
+    if (statusWhiteList.includes(status)) return Promise.reject(res);
+    //如果是401则跳转到登录页面
+    if (status === 401)
+      store.dispatch("FedLogOut").then(() => router.push({ path: "/login" }));
+    // 如果请求为非200否者默认统一处理
+    if (status !== 200) {
+      Message({
+        message: message,
+        type: "error",
+      });
+      return Promise.reject(new Error(message));
+    }
+    return res;
+  },
+  (error) => {
+    NProgress.done();
+    return Promise.reject(new Error(error));
   }
-  return res;
-}, error => {
-  NProgress.done();
-  return Promise.reject(new Error(error));
-});
+);
 
 export default axios;

vue.config.js

@@ -1,5 +1,5 @@
-const packageName = require("./package.json").name;
-console.log(packageName);
+const packageName = require('./package.json').name
+console.log(packageName)
 module.exports = {
   //路径前缀
   //打包配置，解决页面空白的配置方案。
@@ -9,17 +9,17 @@ module.exports = {
   productionSourceMap: false,
   chainWebpack: (config) => {
     config.module
-      .rule("fonts")
+      .rule('fonts')
       .test(/.(ttf|otf|eot|woff|woff2)$/)
-      .use("url-loader")
-      .loader("url-loader")
+      .use('url-loader')
+      .loader('url-loader')
       .tap((options) => {
         options = {
           // limit: 10000,
-          name: "/static/fonts/[name].[ext]",
-        };
-        return options;
-      });
+          name: '/static/fonts/[name].[ext]',
+        }
+        return options
+      })
   },
   // chainWebpack: (config) => {
 
@@ -43,17 +43,17 @@ module.exports = {
   devServer: {
     port: 1777,
     headers: {
-      "Access-Control-Allow-Origin": "*",
+      'Access-Control-Allow-Origin': '*',
     },
     proxy: {
-      "/api": {
+      '/api': {
         //本地服务接口地址
-        target: "http://192.168.1.100/api",
+        target: 'http://36.134.91.96:10001/api',
         //远程演示服务地址,可用于直接启动项目
         //target: 'https://saber.bladex.vip/api',
         ws: true,
         pathRewrite: {
-          "^/api": "/",
+          '^/api': '/',
         },
       },
     },
@@ -62,8 +62,8 @@ module.exports = {
   configureWebpack: {
     output: {
       library: `${packageName}-[name]`,
-      libraryTarget: "umd",
+      libraryTarget: 'umd',
       jsonpFunction: `webpackJsonp_${packageName}`,
     },
   },
-};
+}