jQuery ajax请求返回401问题解决方案

快乐打工仔 分类:实例代码

在请求时候,可能存在响应401的情况(身份认证过期或未登录)。

比较容易出现在混合应用上,如何进行身份认证,重发失败请求,还是值得注意的。

一.ajax请求有两种方式:

回调方式:

最常写的方式,成功失败处理以回调方式传入。

$.ajax({
   ajax参数...
   success : xxxxxx
   error: xxxxxx
});

Deferred方式:

ajax调用本身返回就是一个Deferred对象,成功失败回调不以参数传入。

$.ajax({
   ajax参数...
}).then(function(res){
  //成功处理片段
},function(err){
  //失败处理片段
});

既然有这两种方式,那应对处理401的方式也是有两种。

回调方式:

这种方式的处理比较简单,在失败回调里面判断401,如果是则进行身份认证,成功重发请求。

function getXXXX(type, url, data, success, error){
  $.ajax({
    ajax参数...
     success : xxxxxx
     error : function(xhr,textStatus,errorThrown){
      if (xhr.status == 401) {
         刷新身份认证方法(function(){
         getXXXX(type, url, data, success, error);
        });
      } else{
        // 调用外部的error
        error && error(xhr,textStatus,errorThrown);
      }
    }
  });
}

Deferred方式:

这种方式目前我找到的处理方式需要修改jquery源码。

//全局设置一个方法
$.ajaxSetup({
   authError : function(callback){
      刷新身份认证方法( function(){
        callback && callback();
      });
   }
});
   
//jquery2.1.4版本源码,大概是8261行
// Success/Error
if ( isSuccess ) {
   deferred.resolveWith( callbackContext, [ success, statusText, jqXHR ] );
} else {
   if(( jqXHR.status == 401 || jqXHR .status == 403) && callbackContext.authError){
     callbackContext.authError(function (){
      state = 0;
      jqXHR.setRequestHeader( "Authorization", XXXXXX);
      jqXHR.readyState = 1;
      try {
        state = 1;
        transport.send( requestHeaders, done );
      } catch ( e ) {
        // Propagate exception as error if not done
        if ( state < 2 ) {
           done( -1, e );
        // Simply rethrow otherwise
        } else {
          throw e;
        }
      }
     });
     return;
   } else {
      deferred.rejectWith( callbackContext, [ jqXHR, statusText, error ] );
   }
}

这里说下为什么不能像第一种方式那样进行请求:

(1). then这种链式写法,导致这请求的回调不是在参数里,而是在jQuery.Callbacks一个optionsCache全局变量里,我们无法在ajax error里拿到回调函数进行重发。

(2). 写在then里的回调触发一次就会被销毁,当触发了error时,回调执行后就销毁。最后的处理方式就是在要触发error之前,拦截401的错误,重新进行身份认证,然后重置状态,重发请求。

jQuery ajax请求返回401问题解决方案,这样的场景在实际项目中还是用的比较多的,关于jQuery ajax请求返回401问题解决方案就介绍到这了。

jQuery ajax请求返回401问题解决方案属于前端实例代码,有关更多实例代码大家可以查看

回复

我来回复
  • 暂无回复内容