react项目使用EventBus实现登录拦截

关于EventBus

EventBus是一个事件发布/订阅模式的实现，它允许不同的组件或模块之间进行通信，而不需要直接引用对方。这种模式特别适用于那些需要跨组件传递信息，但又不想引入复杂依赖关系的场景。

实现思路

1. 利用axios中间件，在axios中拦截401的code状态码，拦截到之后，发起events事件
2. 在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>   ) }