关于EventBus
EventBus是一个事件发布/订阅模式的实现，它允许不同的组件或模块之间进行通信，而不需要直接引用对方。这种模式特别适用于那些需要跨组件传递信息，但又不想引入复杂依赖关系的场景。
实现思路
- 利用axios中间件，在axios中拦截401的code状态码，拦截到之后，发起events事件
- 在app.tsx中监听，然后跳转页面
为什么不使用window.localtion = xxxx跳转？这样破坏单页面应用的交互，使用window.location 页面会直接刷新。
为什么不直接使用navigate跳转？ navigate只能在组件中使用。
实现步骤
实现EventBus
新建一个event.js文件
import { EventEmitter } from 'events';
const eventBus = new EventEmitter()export default eventBus;
在axios中进行拦截时使用
import axios from 'axios';
import EventBus from './event'
const instance = axios.create({
})
instance.interceptors.response.use(function (response) {if (response.status === 200) {if (response.data.code === 401) {// 此时用户没有进行登录EventBus.emit('global_not_login', response.data.msg)}if (response.data.code === -1) {EventBus.emit('global_error_tips', response.data.msg)}} else if (response.status === 403) {EventBus.emit('global_error_auth', '没有权限，别瞎访问')}return response;
}, function (error) {EventBus.emit('global_error_tips', error.response.data.message)return Promise.reject(error);
});
export type AxiosRes<T = ResData> = {config: Object,data: T,headers: any,request: any,status: number,statusText: string
}
export type ResData<T = any> = {code: number,msg: string,data: T
}
export type AxiosResData<T = any> = AxiosRes<ResData<T>>
export default instance
在app.ts页面进行监听
部分代码如下，核心就是在useEffect使用EventBus.on订阅global_not_login这个事件，检测到事件的发出，则跳转到登录页面
function App() {const navigate = useNavigate()useEffect(()=>{EventBus.on('global_not_login', function (msg) {navigate('/login')})}, [])return (<Routes><Route path="/" element={<Navigate to={'/login'}></Navigate>}></Route>{/* 页面1 登录 */}<Route path={routersData.login.path} element={<Login />}></Route></Routes>)
}
