React配合axios请求拦截校验session，403跳转至登陆页面

这个在Vue中很简单的就解决了，直接引入router，然后router.push，但是在React中，我们要使用props.history.push进行跳转(不使用window.location.href = ‘/login’😉，但是怎么在axios.js中拿到props呢？又是个问题。

在axios中做统一拦截，在响应拦截中，判断后端返回的状态码code是否为403，403的话表示sessionId过期，我们需要让页面跳转到登录页面，凡是返回403有两种：
1、第一种是浏览器返回的403；
2、第二种是后端开发人员返回的403；
所以我们将响应拦截改成这样即可：

import axios from 'axios'
import https from 'https';
import {
    message } from "antd";
import eventBus from '@/utils/eventBus'
/**
 * 如果有多个请求都是 403 就需要这个开关 来控制message的展示个数
 * 展示一个之后  关闭阀门
 */
let messageFlag = false;
/**
 * props是app.js页面传入的 this.props
 * 用于路由跳转  当403的时候 进行路由跳转
 */
let props = "";

/**
 * 当使用这个js的时候 会监听这个自定义事件
 * 改变props的值 
 */
eventBus.$on((propsObj) => {
   
    props = propsObj
}, 'axiosInterceptorsFun')

const goLoginFun = () => {
   
    if (messageFlag === false) {
   
        message.warning("登录已过期，请重新登录！")
        messageFlag = true
        setTimeout(() => {
   
            messageFlag = false
        }, 2000)
        props && props.history.push('/login')
    }
}
axios.defaults.timeout = 60000 * 5; //设置默认超时 10s
axios.defaults.withCredentials = true;

const instance = axios.create({
   
    httpsAgent: new https.Agent({
   
        rejectUnauthorized: false,
    })
});
instance.interceptors.response.use(function (response) {
   
    console.log(response, "接口返回")
    let {
    data: {
    code } } = response
    if (code === 403) {
   
        goLoginFun()
        return {
   }
    }
    return response
}, function (error) {
   
    console.log(error.response, 'error1')
    console.log(error.request, 'error2')
    console.log(error, 'error3')
    if (error.response) {
   
        if (error.response.status == 403) {
   
            goLoginFun()
        }
        return Promise.reject(error.response)
    } else if (error.request) {
   
        if (error.request.status == 403) {
   
            goLoginFun()
        }
        return Promise.reject(error.request)
    } else {
   
        goLoginFun()
        return Promise.reject(error.message)
    }

})

主要是在这个js中我们监听了自定义事件axiosInterceptorsFun：

eventBus.$on((propsObj) => {
   
    props = propsObj
}, 'axiosInterceptorsFun')

这个事件我们可以在app.js跟组件中进行挂载的时候监听触发：

import eventBus from  '@/utils/eventBus'
 componentDidMount() {
   
    eventBus.$emit('axiosInterceptorsFun',this.props)
    }

当跟组件实例化的时候，axios已经开始监听axiosInterceptorsFun这个事件，在app.js中触发，所以在axios.js中我们已经拿到了props这个对象，这个对象上有我们需要的路由跳转方法。

eventBus.js内容：

const eventBus = {
   
    evnetList: [],
    // 监听事件
    $on(callbackFun, name) {
   
        this.evnetList.push({
   
            name,
            callbackFun
        })
    },
    //触发事件
    $emit(name, data) {
   
        this.evnetList.forEach(element => {
   
            if (name === element.name) {
   
                element.callbackFun(data)
            }
        });
    },
}
export default eventBus

eventBus.js:

/*
 * @Descripttion: 
 * @version: 
 * @Author: ZhangJunQing
 * @Date: 2021-12-09 14:04:03
 * @LastEditors: ZhangJunQing
 * @LastEditTime: 2022-03-08 14:42:56
 */
const eventBus = {
   
    evnetList: [],
    // 监听事件
    $on(callbackFun, name) {
   
        // 同名事件 过滤
        if (this.evnetList.length > 0 && this.evnetList.find(i => i.name === name)) {
   
            this.evnetList = this.evnetList.filter(i => i.name !== name)
        }
        this.evnetList = [...this.evnetList, {
    name, callbackFun }]
    },
    //触发事件
    $emit(name, data = '') {
   
        if (!name) {
   
            return false;
        }
        this.evnetList.forEach(element => {
   
            if (name === element.name) {
   
                element.callbackFun(data)
            }
        });
    },
    // 取消事件监听
    $remove(name = "") {
   
        // console.log(name, "取消事件监听")
        this.evnetList = [...this.evnetList.filter(i => i.name !== name)]
    }
}
export default eventBus

这篇文章是对eventBus的解释：

React非父子组件之间的事件传递