feat: add token expired example page

.eslintrc.cjs

@@ -79,6 +79,7 @@ module.exports = {
     'import/no-duplicates': 'warn',
     'import/no-extraneous-dependencies': 'off',
     'import/prefer-default-export': 'off',
+    'import/no-cycle': 'off',
     'import/order': [
       'warn',
       {

src/_mock/assets.js

@@ -264,6 +264,15 @@ const FUNCTIONS_PERMISSION = {
       route: 'clipboard',
       component: '/functions/clipboard/index.tsx',
     },
+    {
+      id: '3667930780705751',
+      parentId: '8132044808088488',
+      label: 'sys.menu.token_expired',
+      name: 'Token Expired',
+      type: PermissionType.MENU,
+      route: 'token-expired',
+      component: '/functions/token-expired/index.tsx',
+    },
   ],
 };
 const MENU_LEVEL_PERMISSION = {

src/_mock/handlers/_demo.js

@@ -0,0 +1,9 @@
+import { http, HttpResponse } from 'msw';
+
+import { DemoApi } from '@/api/services/demoService';
+
+const mockTokenExpired = http.post(`/api${DemoApi.TOKEN_EXPIRED}`, () => {
+  return new HttpResponse(null, {status: 401})
+});
+
+export default [mockTokenExpired];

src/_mock/index.js

@@ -2,6 +2,7 @@ import { setupWorker } from 'msw/browser';
 
 import orgMockApi from './handlers/_org';
 import userMockApi from './handlers/_user';
+import demoMockApi from './handlers/_demo';
 
-const handlers = [...userMockApi, ...orgMockApi];
+const handlers = [...userMockApi, ...orgMockApi, ...demoMockApi];
 export const worker = setupWorker(...handlers);

src/api/apiClient.ts

@@ -1,8 +1,8 @@
 import { message as Message } from 'antd';
 import axios, { AxiosRequestConfig, AxiosError, AxiosResponse } from 'axios';
-import { isEmpty } from 'ramda';
 
 import { t } from '@/locales/i18n';
+import userStore from '@/store/userStore';
 
 import { Result } from '#/api';
 import { ResultEnum } from '#/enum';
@@ -44,19 +44,14 @@ axiosInstance.interceptors.response.use(
   },
   (error: AxiosError<Result>) => {
     const { response, message } = error || {};
-    let errMsg = '';
-    try {
-      errMsg = response?.data?.message || message;
-    } catch (error) {
-      throw new Error(error as unknown as string);
-    }
-    // 对响应错误做点什么
-    if (isEmpty(errMsg)) {
-      // checkStatus
-      // errMsg = checkStatus(response.data.status);
-      errMsg = t('sys.api.errorMessage');
-    }
+
+    const errMsg = response?.data?.message || message || t('sys.api.errorMessage');
     Message.error(errMsg);
+
+    const status = response?.status;
+    if (status === 401) {
+      userStore.getState().actions.clearUserInfoAndToken();
+    }
     return Promise.reject(error);
   },
 );

src/api/services/demoService.ts

@@ -0,0 +1,11 @@
+import apiClient from '../apiClient';
+
+export enum DemoApi {
+  TOKEN_EXPIRED = '/user/tokenExpired',
+}
+
+const mockTokenExpired = () => apiClient.post({ url: DemoApi.TOKEN_EXPIRED });
+
+export default {
+  mockTokenExpired,
+};

src/locales/lang/en_US/sys.json

@@ -112,6 +112,7 @@
       "chart": "Chart",
       "functions": "Functions",
       "clipboard": "Clipboard",
+      "token_expired": "Token Expired",
       "menulevel": {
         "index": "Menu Level",
         "1a": "Menu Level 1a",

src/locales/lang/zh_CN/sys.json

@@ -111,6 +111,7 @@
       "chart": "图表",
       "functions": "功能",
       "clipboard": "剪贴板",
+      "token_expired": "Token失效",
       "menulevel": {
         "index": "多级菜单",
         "1a": "多级菜单 1a",

src/pages/functions/token-expired/index.tsx

@@ -0,0 +1,27 @@
+import { useMutation } from '@tanstack/react-query';
+import { Card, Row, Col, Typography, Button } from 'antd';
+
+import demoService from '@/api/services/demoService';
+
+export default function TokenExpired() {
+  const tokenExpiredMutation = useMutation(demoService.mockTokenExpired);
+  const mockTokenExpired = () => {
+    tokenExpiredMutation.mutate();
+  };
+  return (
+    <Card>
+      <Row gutter={[16, 16]}>
+        <Col span={24} md={12}>
+          <Typography.Text>
+            Clicking a button to simulate a token expiration scenario.
+          </Typography.Text>
+        </Col>
+        <Col span={24} md={12}>
+          <Button type="primary" onClick={mockTokenExpired}>
+            Simulate Token Expired
+          </Button>
+        </Col>
+      </Row>
+    </Card>
+  );
+}

src/store/userStore.ts

@@ -1,6 +1,5 @@
 import { useMutation } from '@tanstack/react-query';
 import { App } from 'antd';
-import { useCallback } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { create } from 'zustand';
 
@@ -70,6 +69,7 @@ export const useSignIn = () => {
     }
   };
 
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  return useCallback(signIn, []);
+  return signIn;
 };
+
+export default useUserStore;