ajax处理token非法或失效

在日常的开发中,经常会遇到token超时或非法的处理,这个时候就需要前端根据不同情况处理对应问题。但页面的接口又非常的多,不知道这种异常会从哪个接口抛出,总不可能给所有方法添加相关代码。所以就需要一个统一处理的方法,在此之前需要了解下面这个方法。
ajaxSetup
该方法用于设置ajax的全局默认设置,比如

$.ajaxSetup( {
    
    
    url: "/index.html" , // 默认URL
    async: false , // 默认同步加载
    type: "POST" , // 默认使用POST方式
    headers: {
    
     // 默认添加请求头
        "Author": "CodePlayer" ,
        "Powered-By": "CodePlayer"
    } ,
    error: function(jqXHR, textStatus, errorMsg){
    
     // 出错时默认的处理函数
        // jqXHR 是经过jQuery封装的XMLHttpRequest对象
        // textStatus 可能为: null、"timeout"、"error"、"abort"或"parsererror"
        // errorMsg 可能为: "Not Found"、"Internal Server Error"等       
    }
} );

设置了默认值之后,后面所有的ajax请求url ,type,等的默认值均已被ajaxSetup()加上,如果没有设置参数就使用默认值,如果设置了就使用自己设置的参数值

//没有设置参数则使用默认值
$.ajax( );
// 设置了url、type、success、error,就使用自己设置的参数值
// 但async、headers等参数的默认值已被$.ajaxSetup()更改
$.ajax( {
    
    
    url: "xxxxxxxx" ,
    type: "GET" ,
    success: function( data, textStatus, jqXHR ){
    
    
        console.log(data,'返回数据')
    } ,
    error: function(jqXHR, textStatus, errorMsg){
    
    
        console.log(errorMsg)     
    }
});

然后这个要怎么处理token失效呢?需要用到下面这个方法

complete:function  //ajax 请求完成激活本事件。这个方法很方便完成ajax 异常的处理。

通过这个方法可以拿到每次请求的返回状态,通过他的errorCode判断他的错误类型从而执行不同的处理方式

//处理token失效
            $.ajaxSetup({
    
    
            contentType:"application/x-www-form-urlencoded;charset=utf-8",
            complete:function(XMLHttpRequest,textStatus){
    
    
                // 通过XMLHttpRequest取得响应结果
                var res = XMLHttpRequest.responseText;
                try{
    
    
                    var jsonData = JSON.parse(res);
                    // console.log("ajax",jsonData)
                    if(jsonData.errorCode == "session_timeout" || jsonData.errorCode == "invalid_login" || jsonData.errorCode == "invalid_token"){
    
    
                        //如果超时就处理 ,指定要跳转的页面(比如登陆页)
                        that.$message({
    
    
                                type:'error',
                                 offset:4,
                                message:"身份信息过期,请重新登录!",           //  type:success/warning/info/error
                                showClose:true
                            })
                        setTimeout(()=>{
    
    
                          需要进行的操作,比如跳转到登录页
                            that.$router.push({
    
    path:'/'});
                        },1000)
                    }else if(jsonData.code == "ok"){
    
    
                        //正常登录,无异常。
                    }
                }catch(e){
    
    
                }
            }
        });

如果对请求方法进行了封装,那就可以在封装的方法中处理一下这些错误,如果没有封装就可以使用此方法统一处理。
本人新手一枚,如有错误,请大佬指正!

猜你喜欢

转载自blog.csdn.net/Lclghjk/article/details/109029992