Merge branch 'leng_dev' of https://gitee.wang/pigx/pigx-ui into leng_dev

src/page/index/index.vue

@@ -3,26 +3,27 @@
        :class="{'avue--collapse':isCollapse}">
     <div class="avue-header">
       <!-- 顶部导航栏 -->
-      <top />
+      <top/>
     </div>
 
     <div class="avue-layout">
       <div class="avue-left">
         <!-- 左侧导航栏 -->
-        <sidebar />
+        <sidebar/>
       </div>
       <div class="avue-main">
         <!-- 顶部标签卡 -->
-        <tags />
+        <tags/>
         <!-- 主体视图层 -->
         <el-scrollbar style="height:100%">
           <keep-alive>
             <router-view class="avue-view"
-                         v-if="$route.meta.keepAlive" />
+                         v-if="$route.meta.$keepAlive"/>
           </keep-alive>
           <router-view class="avue-view"
-                       v-if="!$route.meta.keepAlive" />
+                       v-if="!$route.meta.$keepAlive"/>
         </el-scrollbar>
+
       </div>
     </div>
     <div class="avue-shade"
@@ -31,73 +32,81 @@
 </template>
 
 <script>
-  import { mapGetters } from "vuex";
-  import tags from "./tags";
-  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 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,
       sidebar
     },
-    name: "index",
+    name: 'index',
     data() {
       return {
         //刷新token锁
         refreshLock: false,
         //刷新token的时间
-        refreshTime: ""
-      };
+        refreshTime: '',
+      }
     },
     created() {
       //实时检测刷新token
-      this.refreshToken();
+      this.refreshToken()
+    },
+    destroyed() {
+      console.log("销毁")
+      console.log(this.refreshTime)
+      clearInterval(this.refreshTime)
     },
     mounted() {
-      this.init();
+      this.init()
     },
-    computed: mapGetters(["isLock", "isCollapse", "website"]),
+    computed: mapGetters(['isLock', 'isCollapse', 'website', 'expires_in']),
     props: [],
     methods: {
       showCollapse() {
-        this.$store.commit("SET_COLLAPSE");
+        this.$store.commit("SET_COLLAPSE")
       },
       // 屏幕检测
       init() {
-        this.$store.commit("SET_SCREEN", admin.getScreen());
+        this.$store.commit('SET_SCREEN', admin.getScreen())
         window.onresize = () => {
           setTimeout(() => {
-            this.$store.commit("SET_SCREEN", admin.getScreen());
+            this.$store.commit('SET_SCREEN', admin.getScreen())
           }, 0);
-        };
+        }
       },
-      // 10分钟检测一次token
+      // 实时检测刷新token
       refreshToken() {
         this.refreshTime = setInterval(() => {
           const token = getStore({
-            name: "token",
-            debug: true
+            name: 'access_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;
+
+          if (validatenull(token)) {
+            return;
+          }
+
+          if (this.expires_in <= 1000 && !this.refreshLock) {
+            this.refreshLock = true
             this.$store
-              .dispatch("RefreshToken")
-              .then(() => {
-                this.refreshLock = false;
-              })
+              .dispatch('RefreshToken')
               .catch(() => {
-                this.refreshLock = false;
+                clearInterval(this.refreshTime)
               });
+            this.refreshLock = false
           }
+          this.$store.commit("SET_EXPIRES_IN",this.expires_in - 10);
         }, 10000);
-      }
+      },
     }
-  };
+  }
 </script>

src/page/index/top/top-theme.vue

@@ -34,15 +34,15 @@ export default {
       text: "",
       list: [
         {
-          name: "默认主题",
+          name: "默认",
           value: "default"
         },
         {
-          name: "白色主题",
+          name: "白色",
           value: "theme-white"
         },
         {
-          name: "炫彩主题",
+          name: "炫彩",
           value: "theme-star"
         }
       ]

src/styles/theme/index.scss

@@ -1,5 +1,5 @@
 // 白色主题
 @import './white.scss';
 
-// 炫酷主题
+// 炫彩主题
 @import './star.scss';

src/styles/theme/star.scss

@@ -32,10 +32,10 @@
     .el-menu-item,
     .el-submenu__title,
     .el-menu {
-        background-color: transparent 
+        background-color: transparent
     }
     .logo_title,
-    .avue-breadcrumb,
+    .avue-breadcrumb
     {
         color: #fff ;
         i {
@@ -135,4 +135,4 @@
             color: #fff;
         }
     }
-}
+}

src/styles/theme/white.scss

@@ -16,7 +16,7 @@
     color:#fff;
   }
   .logo_title,
-  .avue-breadcrumb,
+  .avue-breadcrumb
   {
       color: #fff ;
       i {
@@ -118,4 +118,4 @@
           color: #fff;
       }
   }
-}
+}