这个在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)
}
})
AI 代码解读
主要是在这个js中我们监听了自定义事件axiosInterceptorsFun：
eventBus.$on((propsObj) => {
props = propsObj
}, 'axiosInterceptorsFun')
AI 代码解读
这个事件我们可以在app.js跟组件中进行挂载的时候监听触发：
import eventBus from '@/utils/eventBus'
componentDidMount() {
eventBus.$emit('axiosInterceptorsFun',this.props)
}
AI 代码解读
当跟组件实例化的时候，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
AI 代码解读
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
AI 代码解读
这篇文章是对eventBus的解释：
