perf: 新增token过期示例

mock/request/index.ts

@@ -60,5 +60,16 @@ export default [
         data: 'request-5'
       }
     }
+  },
+  {
+    url: '/request/expired',
+    method: 'get',
+    timeout: 0,
+    response: () => {
+      return {
+        code: 401,
+        message: 'token expired'
+      }
+    }
   }
 ] as MockMethod[]

src/api/request/index.ts

@@ -30,3 +30,9 @@ export const request5 = () => {
     url: '/request/5'
   })
 }
+
+export const expired = () => {
+  return request.get<IResponse<RequestResponse>>({
+    url: '/request/expired'
+  })
+}

src/config/axios/config.ts

@@ -1,3 +1,4 @@
+import router from '@/router'
 import {
   AxiosConfig,
   AxiosResponse,
@@ -6,6 +7,9 @@ import {
 } from './types'
 import { ElMessage } from 'element-plus'
 import qs from 'qs'
+import { useStorage } from '@/hooks/web/useStorage'
+
+const { clear } = useStorage()
 
 const config: AxiosConfig = {
   /**
@@ -66,7 +70,12 @@ const defaultResponseInterceptors = (response: AxiosResponse<any>) => {
   } else if (response.data.code === config.code) {
     return response.data
   } else {
-    ElMessage.error((response as any).message)
+    ElMessage.error(response?.data?.message)
+    if (response?.data?.code === 401) {
+      // token过期
+      clear()
+      router.push('/login')
+    }
   }
 }
 

src/views/Function/Request.vue

@@ -1,8 +1,8 @@
 <script lang="ts" setup>
 import { ContentWrap } from '@/components/ContentWrap'
 import { useI18n } from '@/hooks/web/useI18n'
-import { ElButton } from 'element-plus'
+import { ElButton, ElDivider } from 'element-plus'
-import { request1, request2, request3, request4, request5 } from '@/api/request'
+import { request1, request2, request3, request4, request5, expired } from '@/api/request'
 import { ref } from 'vue'
 import request from '@/config/axios'
 
@@ -151,6 +151,10 @@ const clickRequest5 = () => {
   }
   getRequest5()
 }
+
+const tokenExpired = () => {
+  expired()
+}
 </script>
 
 <template>
@@ -163,5 +167,7 @@ const clickRequest5 = () => {
     <ElButton type="primary" @click="clickRequest5">请求/取消request5</ElButton>
     <ElButton type="primary" @click="getAll">发送五个请求</ElButton>
     <ElButton type="primary" @click="cancelAll">关闭所有请求</ElButton>
+    <ElDivider />
+    <ElButton type="primary" @click="tokenExpired">token过期</ElButton>
   </ContentWrap>
 </template>