Przeglądaj źródła

fix 取消禁止复制 优化token失效

pujiaming 2 lat temu
rodzic
commit
ab905caa46
6 zmienionych plików z 71 dodań i 29 usunięć
  1. 22 5
      src/common/request.ts
  2. 1 1
      src/components/vantList.vue
  3. 41 2
      src/main.ts
  4. 1 17
      src/router/index.ts
  5. 1 3
      src/style.css
  6. 5 1
      src/views/home.vue

+ 22 - 5
src/common/request.ts

@@ -1,8 +1,20 @@
-// import router from '@/router/index'
+import router from '@/router/index'
+import { computed } from 'vue'
 import axios from 'axios'
 import { ElMessage } from 'element-plus'
 const api = import.meta.env.VITE_API_HOST
-
+const platform = computed(() => {
+  const u = navigator.userAgent
+  return {
+    mobile: !!u.match(/AppleWebKit.*Mobile.*/), // 是否为移动终端
+    ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), // ios终端
+    android: u.indexOf('Android') > -1 || u.indexOf('Adr') > -1, // android终端
+    iPhone: u.indexOf('iPhone') > -1, // 是否为iPhone或者QQHD浏览器
+    iPad: u.indexOf('iPad') > -1, // 是否iPad
+    webApp: u.indexOf('Safari') === -1, // 是否web应该程序,没有头部与底部
+    weixin: u.indexOf('MicroMessenger') > -1 // 是否微信
+  }
+})
 const instance = axios.create({
   baseURL: api
 })
@@ -22,9 +34,14 @@ instance.interceptors.response.use(response => {
   if (err.response.status === 401) {
     sessionStorage.removeItem('token')
     ElMessage.error('登录状态已失效!请重新登录!')
-    // setTimeout(() => {
-    //   router.push({ path: '/login' })
-    // }, 1000)
+    setTimeout(() => {
+      if (platform.value.mobile) {
+        router.push({ path: '/login' })
+      } else {
+        router.push({ path: '/home', query: { tologin: 1 }})
+      }
+      // location.reload()
+    }, 1000)
   }
   return Promise.reject(err.response)
 })

+ 1 - 1
src/components/vantList.vue

@@ -64,7 +64,7 @@ const onLoad = async(flag?:any, pa?:any) => {
     if (!list.value.length) emit('noData')
   }).catch((err:any) => {
     console.log(err)
-    showNotify({ type: 'danger', message: err.data })
+    // showNotify({ type: 'danger', message: err.data.msg })
     finished.value = true
     error.value = true
   })

+ 41 - 2
src/main.ts

@@ -1,10 +1,10 @@
-import { createApp } from 'vue'
+import { createApp, computed } from 'vue'
 import './style.css'
 import './global.scss'
 import App from './App.vue'
 import { getAssetsFile } from '@/utils/imgResolve'
 import router from './router'
-import store from './store/index'
+import store, { useStore } from './store/index'
 import ElementPlus from 'element-plus'
 import 'element-plus/dist/index.css'
 import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
@@ -28,6 +28,19 @@ const setHtmlFontSize = () => {
 
 window.onresize = setHtmlFontSize
 setHtmlFontSize()
+const whteList = ['/home', '/login', '/my_game', '/cate', '/']
+const platform = computed(() => {
+  const u = navigator.userAgent
+  return {
+    mobile: !!u.match(/AppleWebKit.*Mobile.*/), // 是否为移动终端
+    ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), // ios终端
+    android: u.indexOf('Android') > -1 || u.indexOf('Adr') > -1, // android终端
+    iPhone: u.indexOf('iPhone') > -1, // 是否为iPhone或者QQHD浏览器
+    iPad: u.indexOf('iPad') > -1, // 是否iPad
+    webApp: u.indexOf('Safari') === -1, // 是否web应该程序,没有头部与底部
+    weixin: u.indexOf('MicroMessenger') > -1 // 是否微信
+  }
+})
 
 const app = createApp(App)
 
@@ -41,4 +54,30 @@ app.use(ElementPlus, {
   locale: zhCn,
   size: 'large', zIndex: 3000
 })
+
 app.mount('#app')
+const { user } = useStore()
+router.beforeEach((to, _from, next) => {
+  // ...
+  // 返回 false 以取消导航
+  // return false
+  console.log(platform.value.mobile)
+  console.log('store', user.loginFormVisible)
+
+  document.title = to.meta.title as string
+  const token = sessionStorage.getItem('token')
+  if (whteList.includes(to.path)) {
+    next()
+  } else {
+    if (!token) {
+      if (platform.value.mobile) {
+        next('/login')
+      } else {
+        user.loginFormVisible = true
+        next(false)
+      }
+    } else {
+      next()
+    }
+  }
+})

+ 1 - 17
src/router/index.ts

@@ -113,23 +113,7 @@ const router = createRouter({
     return { top: 0 }
   }
 })
-const whteList = ['/home', '/login', '/my_game', '/cate', '/']
-router.beforeEach((to, _from, next) => {
-  // ...
-  // 返回 false 以取消导航
-  // return false
-  document.title = to.meta.title as string
-  const token = sessionStorage.getItem('token')
-  if (whteList.includes(to.path)) {
-    next()
-  } else {
-    if (!token) {
-      next('/login')
-    } else {
-      next()
-    }
-  }
-})
+
 router.afterEach(() => {
   getVersionFR()
 })

+ 1 - 3
src/style.css

@@ -52,9 +52,7 @@ input::-webkit-inner-spin-button {
 input[type="number"] {
  -moz-appearance: textfield;
 }
-*{
-  user-select: none;
-}
+
 /* 谷歌与苹果自带浏览器,隐藏办法如下代码。 */
 *::-webkit-scrollbar {
 	display: none;

+ 5 - 1
src/views/home.vue

@@ -192,7 +192,7 @@
 </template>
 <script setup lang="ts">
 import { ref, onMounted, inject } from 'vue'
-import { useRouter } from 'vue-router'
+import { useRouter, useRoute } from 'vue-router'
 import { useStore } from '@/store'
 import { showFailToast } from 'vant'
 import { getIndexGameHot, getIndexGameRecommand, getGameTag } from '@/api/index'
@@ -200,6 +200,7 @@ import { bytesChange } from '@/utils/bytesFormatter'
 
 const img:any = inject('img')
 const router = useRouter()
+const route = useRoute()
 const { user } = useStore()
 // showSuccessToast('成功文案')
 // showFailToast('失败文案')
@@ -240,6 +241,9 @@ onMounted(async() => {
     // console.log('标签', res);
     tagArr.value = res.data.data
   })
+  if ('tologin' in route.query && route.query.tologin === '1') {
+    user.loginFormVisible = true
+  }
 })
 const logoErrorFun = (event:any) => {
   var imgDom = event.srcElement