feat(auth): implement fallback to login page when accessing with invalid token for multi-end mutually exclusive login

src/API/interceptor.ts

@@ -2,6 +2,7 @@ import axios from 'axios';
 import store from '../states/store';
 import { API_BASE_URL } from './config';
 import { SystemMode } from '../states/systemModeSlice';
+import emitter from '../utils/eventEmitter';
 
 const axiosInstance = axios.create({
   baseURL: API_BASE_URL,
@@ -30,4 +31,18 @@ axiosInstance.interceptors.request.use(
   }
 );
 
+axiosInstance.interceptors.response.use(
+  (response) => {
+    return response;
+  },
+  (error) => {
+    if (error.response && error.response.data.code === 0x000101) {
+      emitter.emit('tokenExpired');
+      // eslint-disable-next-line
+      return new Promise(() => {}); // Suspend the current execution
+    }
+    return Promise.reject(error);
+  }
+);
+
 export default axiosInstance;

src/pages/index/index.tsx

@@ -2,17 +2,36 @@ import { useLoad } from '@tarojs/taro';
 import './index.css';
 import Login from '../security/Login';
 import AppInitializer from './AppInitializer';
-import React from 'react';
+import React, { useEffect } from 'react';
 import BasicLayout from '@/layouts/BasicLayout';
 import { BrowserRouter as Router } from 'react-router-dom';
-import { useSelector } from 'react-redux';
+import { useSelector, useDispatch } from 'react-redux';
 import { RootState } from '@/states/store';
-import { isLoggedIn } from '@/states/user_info';
+import { isLoggedIn, clearUserInfo } from '@/states/user_info';
+import emitter from '@/utils/eventEmitter';
+import { message } from 'antd';
 
 const AppContent: React.FC = () => {
   const [initialized, setInitialized] = React.useState(false);
   const userInfo = useSelector((state: RootState) => state.userInfo);
   const loggedIn = isLoggedIn(userInfo);
+  const dispatch = useDispatch();
+
+  useEffect(() => {
+    const handleTokenExpired = () => {
+      // Log out the user
+      dispatch(clearUserInfo());
+
+      // Show a notification
+      message.error('Your session has expired. Please log in again.');
+    };
+
+    emitter.on('tokenExpired', handleTokenExpired);
+
+    return () => {
+      emitter.off('tokenExpired', handleTokenExpired);
+    };
+  }, [dispatch]);
 
   if (!loggedIn) {
     return <Login />;