perf: Authentication Failure Prompt Optimization

Author: fit2cloud-chenyw

frontend/src/assets/svg/401.svg

@@ -21,6 +21,7 @@ import Appearance from '@/views/system/appearance/index.vue'
 import Permission from '@/views/system/permission/index.vue'
 import User from '@/views/system/user/User.vue'
 import Workspace from '@/views/system/workspace/index.vue'
+import Page401 from '@/views/error/index.vue'
 import { i18n } from '@/i18n'
 import { watchRouter } from './watch'
 
@@ -207,6 +208,13 @@ export const routes = [
     name: 'assistantTest',
     component: assistantTest,
   },
+  {
+    path: '/401',
+    name: '401',
+    hidden: true,
+    meta: {},
+    component: Page401,
+  },
 ]
 const router = createRouter({
   history: createWebHashHistory(),

frontend/src/router/index.ts

@@ -8,7 +8,7 @@ const appearanceStore = useAppearanceStoreWithOut()
 const userStore = useUserStore()
 const { wsCache } = useCache()
 const whiteList = ['/login']
-const assistantWhiteList = ['/assistant', '/embeddedPage']
+const assistantWhiteList = ['/assistant', '/embeddedPage', '/401']
 export const watchRouter = (router: any) => {
   router.beforeEach(async (to: any, from: any, next: any) => {
     await loadXpackStatic()

frontend/src/router/watch.ts

@@ -11,10 +11,12 @@ import axios, {
 import { useCache } from '@/utils/useCache'
 import { getLocale } from './utils'
 import { useAssistantStore } from '@/stores/assistant'
+import { useRouter } from 'vue-router'
 // import { i18n } from '@/i18n'
 // const t = i18n.global.t
 const assistantStore = useAssistantStore()
 const { wsCache } = useCache()
+const router = useRouter()
 // Response data structure
 export interface ApiResponse<T = unknown> {
   code: number
@@ -193,6 +195,15 @@ class HttpService {
             ? error.response.data.toString()
             : 'Unauthorized, please login again'
           // Redirect to login page if needed
+          if (assistantStore.getAssistant) {
+            wsCache.delete('user.token')
+            if (router?.push) {
+              router.push(`/401?title=${encodeURIComponent(errorMessage)}`)
+            } else {
+              window.location.href = `/#/401?title=${encodeURIComponent(errorMessage)}`
+            }
+            return
+          }
           ElMessage({
             message: errorMessage,
             type: 'error',

frontend/src/utils/request.ts

@@ -0,0 +1,34 @@
+<template>
+  <div class="page-not-found">
+    <Icon name="401"><Four class="svg-icon login-logo-icon" /></Icon>
+    <span class="span-403">{{ title || routerTitle || '' }}</span>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import Four from '@/assets/svg/401.svg'
+import { Icon } from '@/components/icon-custom'
+import { propTypes } from '@/utils/propTypes'
+import { computed } from 'vue'
+import { useRoute } from 'vue-router'
+const route = useRoute()
+defineProps({
+  title: propTypes.string,
+})
+const routerTitle = computed(() => route.query?.title || '')
+</script>
+<style lang="less">
+.page-not-found {
+  height: 100px;
+  width: 100%;
+  top: calc(50% - 100px);
+  position: absolute;
+  text-align: center;
+}
+.span-403 {
+  display: block;
+  margin: 0;
+  font-size: var(--ed-font-size-base);
+  color: var(--ed-text-color-secondary);
+}
+</style>