前端有沒有統(tǒng)一跳轉(zhuǎn)的工具

開發(fā)環(huán)境：
前端react
后端java

原來是在返回值中看code是多少，來決定是否跳轉(zhuǎn)到登錄界面。只在某幾個接口設(shè)置了跳轉(zhuǎn)。
現(xiàn)在未登錄狀態(tài)下，后端的接口都會返回401.
有沒有什么工具，能統(tǒng)一設(shè)置。對于所有的接口，如果請求接口返回狀態(tài)是401就跳轉(zhuǎn)到登錄頁面去？

回答

編輯回答

若相惜

react不知道有沒有，應(yīng)該是有的，vue用的axios，可以利用返回的http狀態(tài)碼去進(jìn)行相關(guān)的跳轉(zhuǎn)

2018年3月19日 16:11

編輯回答

熊出沒

可以自己封裝請求方法，然后設(shè)置攔截。

// 攔截ajax請求，檢測是否超時(shí)，以重新登錄
$(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登錄信息時(shí)跳轉(zhuǎn)至登錄頁
                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);
};
// 標(biāo)準(zhǔn)化傳給后臺的參數(shù)
function processRequest(r) {
    const str = r.data || {};
    if ('get' == r.method) {
        if ($.isEmptyObject(str) || null == str) {
            return {
                t: new Date().getTime()
            };
        } else {
            return {
                //添加時(shí)間戳隨機(jī)數(shù)
                params: JSON.stringify(str),
                t: new Date().getTime()
            };
        }
    } else {
        return JSON.stringify(str);
    }
}

// 標(biāo)準(zhǔn)化后臺相應(yīng)數(shù)據(jù)格式
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;
}

2017年11月22日 02:05

編輯回答

萌面人

用axios添加一個響應(yīng)攔截器，例如：

axios.interceptors.response.use(response => {
//在這里對返回的數(shù)據(jù)進(jìn)行處理
    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 = '未授權(quán)，請重新登錄'
                break;
            case 403:
                err.message = '拒絕訪問'
                break;
            case 404:
                err.message = '請求錯誤,未找到該資源'
                break;
            case 405:
                err.message = '請求方法未允許'
                break;
            case 408:
                err.message = '請求超時(shí)'
                break;
            case 500:
                err.message = '服務(wù)器端出錯'
                break;
            case 501:
                err.message = '網(wǎng)絡(luò)未實(shí)現(xiàn)'
                break;
            case 502:
                err.message = '網(wǎng)絡(luò)錯誤'
                break;
            case 503:
                err.message = '服務(wù)不可用'
                break;
            case 504:
                err.message = '網(wǎng)絡(luò)超時(shí)'
                break;
            case 505:
                err.message = 'http版本不支持該請求'
                break;
            default:
                err.message = '連接錯誤' + err.response.status
        }
    }
    else {
        err.message = "連接到服務(wù)器失敗"
    }
    return Promise.resolve(err.response)
})

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

2017年1月17日 05:25

編輯回答