修改token失效 导致白屏问题， 目前设置的有效时长为2小时

front/src/router/index.js

@@ -1,5 +1,7 @@
 import { createRouter, createWebHashHistory } from 'vue-router'
 import Layout from '@/layout'
+import { message } from 'ant-design-vue'
+import Cookies from 'js-cookie'
 
 export const constantRoutes = [
   {
@@ -567,4 +569,24 @@ const router = createRouter({
   routes: constantRoutes,
 })
 
+router.beforeEach((to, from, next) => {
+  let token = Cookies.get('ucsToken')
+  const tokenStartTime = window.localStorage.getItem('tokenStartTime')
+  // 定义失效时间
+  const timeOver = 2 * 60 * 60 * 1000
+  let date = new Date().getTime()
+  if (date - tokenStartTime > timeOver) {
+    token = null
+  }
+  console.log('判断token失效', token, date - tokenStartTime > timeOver)
+  if (!token) {
+    if (to.path == '/login') return next()
+    message.warning('登录失效，请重新登录！')
+    return next('/login')
+  } else if (to.path == '/login') {
+    return next('/home')
+  }
+  next()
+})
+
 export default router

front/src/views/login/index.vue

@@ -15,7 +15,11 @@
               </a-input>
             </a-form-item>
             <a-form-item>
-              <a-input v-model:value="form.password" type="password" placeholder="Password">
+              <a-input
+                v-model:value="form.password"
+                type="password"
+                placeholder="Password"
+              >
                 <template v-slot:prefix>
                   <LockOutlined style="color: rgba(0, 0, 0, 0.25)" />
                 </template>
@@ -23,8 +27,15 @@
             </a-form-item>
             <a-form-item>
               <!-- IE Chrome  || judgeAgent() !== 'Chrome'-->
-              <a-button type="primary" html-type="submit"
+              <a-button
-                :disabled="form.username === '' || form.password === '' || !canOpen.includes(judgeAgent())">
+                type="primary"
+                html-type="submit"
+                :disabled="
+                  form.username === '' ||
+                  form.password === '' ||
+                  !canOpen.includes(judgeAgent())
+                "
+              >
                 登录
               </a-button>
             </a-form-item>
@@ -36,16 +47,17 @@
   </div>
 </template>
 <script>
-import { dependencies, devDependencies } from '*/package.json'
+  import { dependencies, devDependencies } from '*/package.json'
-import { mapActions, mapGetters } from 'vuex'
+  import { mapActions, mapGetters } from 'vuex'
-import { Encrypt } from '@/utils/crypto'
+  import Cookies from 'js-cookie'
-import { UserOutlined, LockOutlined } from '@ant-design/icons-vue'
+  import { Encrypt } from '@/utils/crypto'
-import { message, Modal } from 'ant-design-vue'
+  import { UserOutlined, LockOutlined } from '@ant-design/icons-vue'
+  import { message, Modal } from 'ant-design-vue'
 
-// 是否是西海岸
+  // 是否是西海岸
-const isXiHaiAn = whoShow.itShowXiHaiAn
+  const isXiHaiAn = whoShow.itShowXiHaiAn
 
-export default {
+  export default {
     name: 'Login',
     components: {
       UserOutlined,
@@ -62,7 +74,7 @@ export default {
         devDependencies: devDependencies,
         is360: false,
         isIE: false,
-      canOpen: ['FF', 'Chrome']
+        canOpen: ['FF', 'Chrome'],
       }
     },
     computed: {
@@ -87,7 +99,7 @@ export default {
         Modal.warning({
           title: '提示',
           content: '请使用谷歌或火狐浏览器！',
-      });
+        })
       }
     },
     methods: {
@@ -97,7 +109,7 @@ export default {
       // 判断浏览器
       judgeAgent() {
         let userAgent = navigator.userAgent // 取得浏览器的userAgent字符串
-      console.log('userAgent------------>', userAgent);
+        console.log('userAgent------------>', userAgent)
         let isOpera = userAgent.indexOf('Opera') > -1
         //判断是否Opera浏览器
         if (isOpera) {
@@ -145,8 +157,12 @@ export default {
             password: Encrypt(this.form.password),
             username: this.form.username,
           })
+          window.localStorage.setItem('tokenStartTime', new Date().getTime())
           window.sessionStorage.setItem('visits', JSON.stringify([]))
-        console.log('添加visits========================================>')
+          console.log(
+            '添加visits========================================>',
+            Cookies.get('ucsToken')
+          )
           // console.log(this.handleRoute())
           // 西海岸特殊处理
           if (isXiHaiAn) {
@@ -155,8 +171,8 @@ export default {
               query: {
                 select: '基础设施',
                 tecHnosphere: '',
-              appLiCation: ''
+                appLiCation: '',
-            }
+              },
             })
           } else {
             await this.$router.push('/home')
@@ -166,10 +182,10 @@ export default {
         }
       },
     },
-}
+  }
 </script>
 <style lang="less">
-.login-container {
+  .login-container {
     width: 100%;
     height: 100vh;
     background: url('~@/assets/login_images/login_background.png');
@@ -222,5 +238,5 @@ export default {
       height: 45px;
       border-radius: 99px;
     }
-}
+  }
 </style>