网络请求拦截经常也可用到,比如在所有接口消息请求头部加上验证信息token之类的,或者接口报某类错误时统一处理。这里主要用在请求接口时,判断session是否过期,统一返回状态码区分,如果过期了跳转登录页重新登录
拦截axios部分
重新封装axios请求
//axios拦截器
import axios from 'axios';
axios.defaults.timeout = 10000;
axios.defaults.withCredentials = true;
axios.interceptors.request.use(config => {
//发送请求操作,统一再请求里加上userId
config.headers['userId'] = window.sessionStorage.getItem("userId");
return config;
}, error => {
//发送请求错误操作
console.log('请求失败')
return Promise.reject(error);
})
axios.interceptors.response.use(response => {
//对响应数据做操作
if(parseInt(response.data.code, 10) <= '2000000') {
//console.log('请求成功');
return response
}
if(response.data.code === '2000401' || response.data.code === 2000401) {
console.log('已过期重新登陆', response.data.code);
window.location.href = '/login';
return Promise.reject(response);
}
else {
console.log('请求失败', response.data.code);
alert(response.data.message);
return Promise.reject(response);
}
}, error => {
//对响应数据错误做操作
console.log('请求error', error.message);
return Promise.reject(error);
})
export default axios;
拦截ajax网络请求部分
这里用到了ajaxSetup设置
//ajax全局设置拦截器
import $ from 'jquery';
$.ajaxSetup({
contentType:"application/x-www-form-urlencoded;charset=utf-8",
beforeSend: function(xhr) { //发送请求前的操作
xhr.setRequestHeader("userId", window.sessionStorage.getItem("userId"))
},
complete:function(XMLHttpRequest,textStatus){ //接收请求后的操作
var res = XMLHttpRequest.responseText;
try{
var jsonData = JSON.parse(res);
if(parseInt(jsonData.code, 10) <= '2000000'){
//console.log('请求成功');
}else if(jsonData.code === '2000401' || jsonData.code === 2000401){
console.log('已过期重新登陆', jsonData.code);
window.location.href = '/login';
}else{
console.log('请求失败', jsonData.code);
alert(jsonData.message);
}
}catch(e){
}
},
});
export default $;
最后只需在页面中引入一次即可。