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>
  )
}