【代码优化 22051】 perf: 优化登录报错的提示

src/components/common/LoginErrorModal/index.vue

+<template>
+  <Teleport to="body">
+    <Transition
+      enter-active-class="transition-opacity duration-300 ease-out"
+      leave-active-class="transition-opacity duration-300 ease-in"
+      enter-from-class="opacity-0"
+      leave-to-class="opacity-0"
+    >
+      <div
+        v-if="visible"
+        class="fixed inset-0 z-9999 flex items-center justify-center p-4 isolate backdrop-blur-20px"
+        @click.stop
+        @keydown.stop
+      >
+        <div class="absolute inset-0 bg-black/45 backdrop-saturate-150" aria-hidden="true" />
+
+        <div
+          class="relative bg-white rounded-2xl max-w-full w-90 shadow-[0_8px_30px_rgba(100,116,180,0.16),0_2px_6px_rgba(0,0,0,0.04)]"
+        >
+          <div class="px-6 py-6">
+            <div
+              class="mx-auto mb-3 flex h-12 w-12 items-center justify-center rounded-full bg-red-50"
+            >
+              <svg
+                class="w-6 h-6 text-red-500"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              >
+                <circle cx="12" cy="12" r="10" />
+                <line x1="12" y1="8" x2="12" y2="12" />
+                <line x1="12" y1="16" x2="12.01" y2="16" />
+              </svg>
+            </div>
+
+            <h3 class="text-center text-base font-600 text-gray-800 leading-6">
+              {{ title }}
+            </h3>
+
+            <p class="mt-2 text-center text-13px text-gray-500 leading-5">
+              {{ messgae }}
+            </p>
+          </div>
+        </div>
+      </div>
+    </Transition>
+  </Teleport>
+</template>
+
+<script setup lang="ts">
+const { title = '登录异常' } = defineProps<{
+  title?: string
+}>()
+
+const messgae =
+  import.meta.env.MODE === '检测到未登录或者登录错误，' + 'production'
+    ? '请关闭标签页，从企微工作台重新打开应用'
+    : '请关闭网页或重新打开网页携带code'
+
+const visible = defineModel<boolean>({ default: false })
+onMounted(() => {
+  visible.value = true
+})
+</script>

src/layoutCulture/components/onlineTime.vue

@@ -47,7 +47,7 @@ import { useWindowSize } from '@vueuse/core'
 import { getTodayOnlineSeconds, heartbeat } from '@/api'
 import dayjs from 'dayjs'
 import utc from 'dayjs/plugin/utc'
-import { useOnlineTimeStore } from '@/stores'
+import { useOnlineTimeStore, useUserStore } from '@/stores'
 import { storeToRefs } from 'pinia'
 
 dayjs.extend(utc)
@@ -55,6 +55,9 @@ dayjs.extend(utc)
 const onlineTimeStore = useOnlineTimeStore()
 const { showOnlineTime } = storeToRefs(onlineTimeStore)
 
+const userStore = useUserStore()
+const { userInfo, token } = storeToRefs(userStore)
+
 const { height } = useWindowSize()
 const CONTAINER_HEIGHT = 170,
   GAP = 30
@@ -81,7 +84,12 @@ const timer1 = setInterval(() => {
   currentSeconds.value++
 }, 1000)
 const timer2 = setInterval(async () => {
-  heartbeat()
+  // 如果没有登录就不调用
+  if (!userInfo.value.id || !token.value) {
+    clearInterval(timer2)
+  } else {
+    heartbeat()
+  }
 }, 1000 * 30)
 onUnmounted(() => {
   clearInterval(timer1)

src/utils/request/error.ts

@@ -14,6 +14,9 @@ import service from './index'
 import { useUserStore } from '@/stores/user'
 import { push } from 'notivue'
 import { generateLoginKey } from '@/api'
+import LoginErrorModal from '@/components/common/LoginErrorModal/index.vue'
+import { render, h } from 'vue'
+
 /**
  * 后端逻辑code报错处理
  * @param backendServiceResult 后端传来错误信息
@@ -118,6 +121,7 @@ function useService404() {
 
 // 处理401的
 let promiseFlashing: Promise<void> | null = null
+let hasCatch = false
 async function handleUnAuthorized(axiosError: AxiosError) {
   const userStore = useUserStore()
   if (!promiseFlashing) {
@@ -132,10 +136,15 @@ async function handleUnAuthorized(axiosError: AxiosError) {
     // 获取refreshToken接口报错
     // 直接重新登陆
     // 获取登陆的key
+    if (hasCatch) return
+    hasCatch = true
+    if (!userStore.userInfo.userId) {
+      return render(h(LoginErrorModal), document.body)
+    }
     const { data } = await generateLoginKey({
       timestamp: Date.now(),
       type: 1,
-      userId: userStore.userInfo?.userId || '',
+      userId: userStore.userInfo?.userId,
     })
     // 清理sessionStorage
     localStorage.clear()
@@ -150,6 +159,7 @@ async function handleUnAuthorized(axiosError: AxiosError) {
     // userStore.clearAllUserInfo()
     // return Promise.reject(e)
   } finally {
+    Promise.resolve().then(() => (hasCatch = false))
     promiseFlashing = null
   }
 }