Is there a unified jump tool at the front end?

Development environment:
Front-end react
back-end java

it turns out that it is to see what the code is in the return value to decide whether to jump to the login interface. The jump is only set on a few interfaces.
if you are not logged in, the backend APIs will return 401.
whether there are any tools that can be set uniformly. For all interfaces, jump to the login page if the request interface returns a status of 401?

React.js
Mar.16,2021

react I don't know if there is, but there should be. The axios, used by vue can use the returned http status code to make related jumps

does every interface call XMLHttpRequest directly?
it is recommended that XMLHttpRequest be encapsulated as an ajax method and provided to the calling interface. In this ajax method, the status code of the returned body json is judged and redirected

add a response interceptor with axios, for example: 

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)
})

want to see the details of axios: https://www.kancloud.cn/yunye.

you can encapsulate the request method yourself, and then set the intercept. 

// 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;
}

Previous: What processes and tools do senior front-end engineers have when developing traditional pages?

Next: Jq failed to get child elements of operation?

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
© 2021 CodesHelper
Advertising Contact us About us
Menu