feat(demo): add token expired example

添加token超时例子

mock/demo/account.ts

@@ -1,5 +1,6 @@
 import { MockMethod } from 'vite-plugin-mock';
 import { resultSuccess, resultError } from '../_util';
+import { ResultEnum } from '../../src/enums/httpEnum';
 
 const userInfo = {
   name: 'Vben',
@@ -59,4 +60,12 @@ export default [
       return resultError();
     },
   },
+  {
+    url: '/basic-api/user/tokenExpired',
+    method: 'post',
+    statusCode: 200,
+    response: () => {
+      return resultError('Token Expired!', { code: ResultEnum.TIMEOUT as number });
+    },
+  },
 ] as MockMethod[];

src/api/demo/account.ts

@@ -4,6 +4,7 @@ import { GetAccountInfoModel } from './model/accountModel';
 enum Api {
   ACCOUNT_INFO = '/account/getAccountInfo',
   SESSION_TIMEOUT = '/user/sessionTimeout',
+  TOKEN_EXPIRED = '/user/tokenExpired',
 }
 
 // Get personal center-basic settings
@@ -11,3 +12,5 @@ enum Api {
 export const accountInfoApi = () => defHttp.get<GetAccountInfoModel>({ url: Api.ACCOUNT_INFO });
 
 export const sessionTimeoutApi = () => defHttp.post<void>({ url: Api.SESSION_TIMEOUT });
+
+export const tokenExpiredApi = () => defHttp.post<void>({ url: Api.TOKEN_EXPIRED });

src/utils/http/axios/index.ts

@@ -15,6 +15,7 @@ import { setObjToUrlParams, deepMerge } from '/@/utils';
 import { useErrorLogStoreWithOut } from '/@/store/modules/errorLog';
 import { useI18n } from '/@/hooks/web/useI18n';
 import { joinTimestamp, formatRequestDate } from './helper';
+import { useUserStoreWithOut } from '/@/store/modules/user';
 
 const globSetting = useGlobSetting();
 const urlPrefix = globSetting.urlPrefix;
@@ -61,6 +62,9 @@ const transform: AxiosTransform = {
     switch (code) {
       case ResultEnum.TIMEOUT:
         timeoutMsg = t('sys.api.timeoutMessage');
+        const userStore = useUserStoreWithOut();
+        userStore.setToken(undefined);
+        userStore.logout(true);
         break;
       default:
         if (message) {

src/views/demo/feat/session-timeout/index.vue

@@ -3,7 +3,15 @@
     title="登录过期示例"
     content="用户登录过期示例，不再跳转登录页，直接生成页面覆盖当前页面，方便保持过期前的用户状态！"
   >
-    <a-button type="primary" @click="test">点击触发用户登录过期</a-button>
+    <a-card title="请点击下面的按钮访问测试接口" extra="所访问的接口会返回Token过期响应">
+      <a-card-grid style="width: 50%; text-align: center">
+        <a-button type="primary" @click="test1">HttpStatus == 401</a-button>
+      </a-card-grid>
+      <a-card-grid style="width: 50%; text-align: center">
+        <span></span>
+        <a-button class="ml-4" type="primary" @click="test2">Response.code == 401</a-button>
+      </a-card-grid>
+    </a-card>
   </PageWrapper>
 </template>
 <script lang="ts">
@@ -11,24 +19,36 @@
   import { PageWrapper } from '/@/components/Page';
   import { useUserStore } from '/@/store/modules/user';
 
-  import { sessionTimeoutApi } from '/@/api/demo/account';
+  import { sessionTimeoutApi, tokenExpiredApi } from '/@/api/demo/account';
+  import { Card } from 'ant-design-vue';
 
   export default defineComponent({
     name: 'TestSessionTimeout',
-    components: { PageWrapper },
+    components: { ACardGrid: Card.Grid, ACard: Card, PageWrapper },
     setup() {
       const userStore = useUserStore();
-      async function test() {
+      async function test1() {
-        // 示例网站生产环境用得是mock数据，所以不能返回401，
+        // 示例网站生产环境用的是mock数据，不能返回Http状态码，
         // 所以在生产环境直接改变状态来达到测试效果
         if (import.meta.env.PROD) {
           userStore.setToken(undefined);
           userStore.setSessionTimeout(true);
         } else {
+          // 这个api会返回状态码为401的响应
           await sessionTimeoutApi();
         }
       }
-      return { test };
+
+      async function test2() {
+        // 这个api会返回code为401的json数据，Http状态码为200
+        try {
+          await tokenExpiredApi();
+        } catch (err) {
+          console.log('接口访问错误：', (err as Error).message || '错误');
+        }
+      }
+
+      return { test1, test2 };
     },
   });
 </script>