前端有没有统一跳转的工具

Question

开发环境：
前端react
后端java

原来是在返回值中看code是多少，来决定是否跳转到登录界面。只在某几个接口设置了跳转。
现在未登录状态下，后端的接口都会返回401.
有没有什么工具，能统一设置。对于所有的接口，如果请求接口返回状态是401就跳转到登录页面去？

Answer 1

难道你的每个接口都直接调用了XMLHttpRequest吗？
建议将XMLHttpRequest封装成ajax方法提供给调用接口使用，在这个ajax方法中对返回的body json的状态码进行判断及跳转

Answer 2

react不知道有没有，应该是有的，vue用的axios，可以利用返回的http状态码去进行相关的跳转

Answer 3

用axios添加一个响应拦截器，例如：

axios.interceptors.response.use(response => {
//在这里对返回的数据进行处理
    if (response.status && response.status == 200 && response.data.status == 'error') { 
        return;
    }
        return response;
    }, err => {
    if (err && err.response) {
        switch (err.response.status) {
            case 400:
                err.message = '错误请求'
                break;
            case 401:
                err.message = '未授权，请重新登录'
                break;
            case 403:
                err.message = '拒绝访问'
                break;
            case 404:
                err.message = '请求错误,未找到该资源'
                break;
            case 405:
                err.message = '请求方法未允许'
                break;
            case 408:
                err.message = '请求超时'
                break;
            case 500:
                err.message = '服务器端出错'
                break;
            case 501:
                err.message = '网络未实现'
                break;
            case 502:
                err.message = '网络错误'
                break;
            case 503:
                err.message = '服务不可用'
                break;
            case 504:
                err.message = '网络超时'
                break;
            case 505:
                err.message = 'http版本不支持该请求'
                break;
            default:
                err.message = '连接错误' + err.response.status
        }
    }
    else {
        err.message = "连接到服务器失败"
    }
    return Promise.resolve(err.response)
})

想看axios的详情：https://www.kancloud.cn/yunye...

Answer 4

可以自己封装请求方法，然后设置拦截。

// 拦截ajax请求，检测是否超时，以重新登录
$(document).ajaxComplete((event, xhr, settings) => {
    if (xhr.status === 200) {
        if (settings.dataType === 'json' && xhr.responseJSON !== void 0) {
            let result = xhr.responseJSON;
            if (2001 === result.code) {
                // 没有session登录信息时跳转至登录页
                global.location.href = "/main-login.html";
            }
        }
    } else if (xhr.status === 401) {} else {
         global.location.href = "/main-login.html";
    }
});
export default function(options) {
    const defaultOptions = {
        dataType: 'json',
        cache: true,
        jsonp: 'callback'
    };
    options.data = processRequest(options);
    //url这里加一些代理路径。。。
    options.url = options.url;

    options.headers = {
        "Accept": "application/json",
        "Content-Type": "application/json"
    };

    return $.ajax({...defaultOptions, ...options }).then(processResponse);
};
// 标准化传给后台的参数
function processRequest(r) {
    const str = r.data || {};
    if ('get' == r.method) {
        if ($.isEmptyObject(str) || null == str) {
            return {
                t: new Date().getTime()
            };
        } else {
            return {
                //添加时间戳随机数
                params: JSON.stringify(str),
                t: new Date().getTime()
            };
        }
    } else {
        return JSON.stringify(str);
    }
}

// 标准化后台相应数据格式
function processResponse(r) {
    let str = {};
    if (r.rows) {
        str = r;
        str.code = 0;
        str.list = r.rows;
        delete str.rows;
    } else {
        if (!r.error) {
            if (0 <= r.code) {
                str = r;
            } else {
                str.code = 0;
                str.data = r;
            }
        } else {
            str.code = -1;
            str.message = r.message || r.error;
        }
    }
    return str;
}