react axios和ajax网络请求拦截（session过期跳转登录页）

网络请求拦截经常也可用到，比如在所有接口消息请求头部加上验证信息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 $;

最后只需在页面中引入一次即可。