From c95d9ac76e2709cf6e7b82eaacfde40b3e89fada Mon Sep 17 00:00:00 2001
From: a0049873 <79py69t9wb@privaterelay.appleid.com>
Date: Mon, 10 Oct 2022 10:35:29 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9token=E5=A4=B1=E6=95=88=20?=
 =?UTF-8?q?=E5=AF=BC=E8=87=B4=E7=99=BD=E5=B1=8F=E9=97=AE=E9=A2=98=EF=BC=8C?=
 =?UTF-8?q?=20=E7=9B=AE=E5=89=8D=E8=AE=BE=E7=BD=AE=E7=9A=84=E6=9C=89?=
 =?UTF-8?q?=E6=95=88=E6=97=B6=E9=95=BF=E4=B8=BA2=E5=B0=8F=E6=97=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 front/src/router/index.js       |  22 ++
 front/src/views/login/index.vue | 366 +++++++++++++++++---------------
 2 files changed, 213 insertions(+), 175 deletions(-)

diff --git a/front/src/router/index.js b/front/src/router/index.js
index 47c429c7..9c0f4ca9 100644
--- a/front/src/router/index.js
+++ b/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
diff --git a/front/src/views/login/index.vue b/front/src/views/login/index.vue
index cd9cc7f8..c684ab11 100644
--- a/front/src/views/login/index.vue
+++ b/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"
-                :disabled="form.username === '' || form.password === '' || !canOpen.includes(judgeAgent())">
+              <a-button
+                type="primary"
+                html-type="submit"
+                :disabled="
+                  form.username === '' ||
+                  form.password === '' ||
+                  !canOpen.includes(judgeAgent())
+                "
+              >
                 登录
               </a-button>
             </a-form-item>
@@ -36,191 +47,196 @@
   </div>
 </template>
 <script>
-import { dependencies, devDependencies } from '*/package.json'
-import { mapActions, mapGetters } from 'vuex'
-import { Encrypt } from '@/utils/crypto'
-import { UserOutlined, LockOutlined } from '@ant-design/icons-vue'
-import { message, Modal } from 'ant-design-vue'
+  import { dependencies, devDependencies } from '*/package.json'
+  import { mapActions, mapGetters } from 'vuex'
+  import Cookies from 'js-cookie'
+  import { Encrypt } from '@/utils/crypto'
+  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 {
-  name: 'Login',
-  components: {
-    UserOutlined,
-    LockOutlined,
-  },
-  data() {
-    return {
-      form: {
-        username: '',
-        password: '',
+  export default {
+    name: 'Login',
+    components: {
+      UserOutlined,
+      LockOutlined,
+    },
+    data() {
+      return {
+        form: {
+          username: '',
+          password: '',
+        },
+        redirect: undefined,
+        dependencies: dependencies,
+        devDependencies: devDependencies,
+        is360: false,
+        isIE: false,
+        canOpen: ['FF', 'Chrome'],
+      }
+    },
+    computed: {
+      ...mapGetters({
+        logo: 'settings/logo',
+        title: 'settings/title',
+      }),
+    },
+    watch: {
+      $route: {
+        handler(route) {
+          this.redirect = (route.query && route.query.redirect) || '/'
+        },
+        immediate: true,
       },
-      redirect: undefined,
-      dependencies: dependencies,
-      devDependencies: devDependencies,
-      is360: false,
-      isIE: false,
-      canOpen: ['FF', 'Chrome']
-    }
-  },
-  computed: {
-    ...mapGetters({
-      logo: 'settings/logo',
-      title: 'settings/title',
-    }),
-  },
-  watch: {
-    $route: {
-      handler(route) {
-        this.redirect = (route.query && route.query.redirect) || '/'
-      },
-      immediate: true,
     },
-  },
-  mounted() {
-    this.form.username = ''
-    this.form.password = ''
+    mounted() {
+      this.form.username = ''
+      this.form.password = ''
 
-    if (!this.canOpen.includes(this.judgeAgent())) {
-      Modal.warning({
-        title: '提示',
-        content: '请使用谷歌或火狐浏览器！',
-      });
-    }
-  },
-  methods: {
-    ...mapActions({
-      login: 'user/login',
-    }),
-    // 判断浏览器
-    judgeAgent() {
-      let userAgent = navigator.userAgent // 取得浏览器的userAgent字符串
-      console.log('userAgent------------>', userAgent);
-      let isOpera = userAgent.indexOf('Opera') > -1
-      //判断是否Opera浏览器
-      if (isOpera) {
-        return 'Opera'
-      }
-      //判断是否Firefox浏览器
-      if (userAgent.indexOf('Firefox') > -1) {
-        return 'FF'
-      }
-      //判断是否chorme浏览器
-      if (userAgent.indexOf('Chrome') > -1) {
-        return 'Chrome'
-      }
-      //判断是否Safari浏览器
-      if (userAgent.indexOf('Safari') > -1) {
-        return 'Safari'
-      }
-      //判断是否IE浏览器
-      if (
-        userAgent.indexOf('compatible') > -1 &&
-        userAgent.indexOf('MSIE') > -1 &&
-        !isOpera
-      ) {
-        return 'IE'
-      }
-      //判断是否Edge浏览器
-      if (userAgent.indexOf('Trident') > -1) {
-        return 'Edge'
-      }
-    },
-    handleRoute() {
-      return this.redirect === '/404' || this.redirect === '/403'
-        ? '/home'
-        : this.redirect
-    },
-    async handleSubmit() {
-      // debugger
-      try {
-        // console.log('登录', Decrypt(Encrypt(this.form.password)))
-        if (this.form.password !== this.form.password.trim()) {
-          message.error('登陆失败，用户名或密码错误！')
-          return
-        }
-        await this.login({
-          password: Encrypt(this.form.password),
-          username: this.form.username,
+      if (!this.canOpen.includes(this.judgeAgent())) {
+        Modal.warning({
+          title: '提示',
+          content: '请使用谷歌或火狐浏览器！',
         })
-        window.sessionStorage.setItem('visits', JSON.stringify([]))
-        console.log('添加visits========================================>')
-        // console.log(this.handleRoute())
-        // 西海岸特殊处理
-        if (isXiHaiAn) {
-          await this.$router.push({
-            path: '/DetailsPageconetent',
-            query: {
-              select: '基础设施',
-              tecHnosphere: '',
-              appLiCation: ''
-            }
-          })
-        } else {
-          await this.$router.push('/home')
-        }
-      } catch (error) {
-        message.error('登陆失败，用户名或密码错误！')
       }
     },
-  },
-}
+    methods: {
+      ...mapActions({
+        login: 'user/login',
+      }),
+      // 判断浏览器
+      judgeAgent() {
+        let userAgent = navigator.userAgent // 取得浏览器的userAgent字符串
+        console.log('userAgent------------>', userAgent)
+        let isOpera = userAgent.indexOf('Opera') > -1
+        //判断是否Opera浏览器
+        if (isOpera) {
+          return 'Opera'
+        }
+        //判断是否Firefox浏览器
+        if (userAgent.indexOf('Firefox') > -1) {
+          return 'FF'
+        }
+        //判断是否chorme浏览器
+        if (userAgent.indexOf('Chrome') > -1) {
+          return 'Chrome'
+        }
+        //判断是否Safari浏览器
+        if (userAgent.indexOf('Safari') > -1) {
+          return 'Safari'
+        }
+        //判断是否IE浏览器
+        if (
+          userAgent.indexOf('compatible') > -1 &&
+          userAgent.indexOf('MSIE') > -1 &&
+          !isOpera
+        ) {
+          return 'IE'
+        }
+        //判断是否Edge浏览器
+        if (userAgent.indexOf('Trident') > -1) {
+          return 'Edge'
+        }
+      },
+      handleRoute() {
+        return this.redirect === '/404' || this.redirect === '/403'
+          ? '/home'
+          : this.redirect
+      },
+      async handleSubmit() {
+        // debugger
+        try {
+          // console.log('登录', Decrypt(Encrypt(this.form.password)))
+          if (this.form.password !== this.form.password.trim()) {
+            message.error('登陆失败，用户名或密码错误！')
+            return
+          }
+          await this.login({
+            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========================================>',
+            Cookies.get('ucsToken')
+          )
+          // console.log(this.handleRoute())
+          // 西海岸特殊处理
+          if (isXiHaiAn) {
+            await this.$router.push({
+              path: '/DetailsPageconetent',
+              query: {
+                select: '基础设施',
+                tecHnosphere: '',
+                appLiCation: '',
+              },
+            })
+          } else {
+            await this.$router.push('/home')
+          }
+        } catch (error) {
+          message.error('登陆失败，用户名或密码错误！')
+        }
+      },
+    },
+  }
 </script>
 <style lang="less">
-.login-container {
-  width: 100%;
-  height: 100vh;
-  background: url('~@/assets/login_images/login_background.png');
-  background-size: cover;
-
-  &-form {
-    width: calc(100% - 40px);
-    height: 380px;
-    padding: 4vh;
-    margin-top: calc((100vh - 380px) / 2);
-    margin-right: 20px;
-    margin-left: 20px;
-    background: url('~@/assets/login_images/login_form.png');
-    background-size: 100% 100%;
-    border-radius: 10px;
-    box-shadow: 0 2px 8px 0 rgba(7, 17, 27, 0.06);
-  }
-
-  &-hello {
-    font-size: 32px;
-    color: #fff;
-  }
-
-  &-title {
-    margin-bottom: 30px;
-    font-size: 20px;
-    color: #fff;
-  }
-
-  &-tips {
-    position: fixed;
-    bottom: @vab-margin;
+  .login-container {
     width: 100%;
-    height: 40px;
-    color: rgba(255, 255, 255, 0.856);
-    text-align: center;
-  }
+    height: 100vh;
+    background: url('~@/assets/login_images/login_background.png');
+    background-size: cover;
 
-  .ant-col {
-    width: 100%;
-    padding: 0 10px 0 10px;
-  }
+    &-form {
+      width: calc(100% - 40px);
+      height: 380px;
+      padding: 4vh;
+      margin-top: calc((100vh - 380px) / 2);
+      margin-right: 20px;
+      margin-left: 20px;
+      background: url('~@/assets/login_images/login_form.png');
+      background-size: 100% 100%;
+      border-radius: 10px;
+      box-shadow: 0 2px 8px 0 rgba(7, 17, 27, 0.06);
+    }
 
-  .ant-input {
-    height: 35px;
-  }
+    &-hello {
+      font-size: 32px;
+      color: #fff;
+    }
 
-  .ant-btn {
-    width: 100%;
-    height: 45px;
-    border-radius: 99px;
+    &-title {
+      margin-bottom: 30px;
+      font-size: 20px;
+      color: #fff;
+    }
+
+    &-tips {
+      position: fixed;
+      bottom: @vab-margin;
+      width: 100%;
+      height: 40px;
+      color: rgba(255, 255, 255, 0.856);
+      text-align: center;
+    }
+
+    .ant-col {
+      width: 100%;
+      padding: 0 10px 0 10px;
+    }
+
+    .ant-input {
+      height: 35px;
+    }
+
+    .ant-btn {
+      width: 100%;
+      height: 45px;
+      border-radius: 99px;
+    }
   }
-}
 </style>