项目中ajax自动设置 token 请求头,接口响应code的统一处理

项目中经常会遇到需要统一设置 ajax请求的预处理 和 需要统一处理ajax返回的需求

比如登录时需要 在头部添加token(X-Auth-Token)

请求完需要判断code为已退出token失效(3001)和权限不足(3002)的情况

开始使用是使用 jQuery.ajaxSetup() 统一设置ajax参数,但是官方不建议使用,而且这种方式确实不够灵活

http://api.jquery.com/jQuery.ajaxSetup/

Description: Set default values for future Ajax requests. Its use is not recommended.

后来看到 ajax的全局事件的支持,发现这个比较适合

http://api.jquery.com/category/ajax/global-ajax-event-handlers/


  1. if(window.jQuery){
  2. //ajax预处理 后置处理
  3. jQuery(document).bind("ajaxSend", function(event, request, settings){
  4. var token = getUserToken();
  5. //config_contextPath 为需要设置token的 全局host,严格判断防止 token发送到其他站点被盗取
  6. if(token && config_contextPath && settings.url && settings.url.indexOf(config_contextPath) === 0){
  7. var headers = settings.headers || {};
  8. headers["X-Auth-Token"] = token;
  9. request.setRequestHeader("X-Auth-Token", token);
  10. settings.headers = headers;
  11. }
  12. }).bind("ajaxComplete", function(event, xhr, settings){
  13. if(config_contextPath && settings.url && settings.url.indexOf(config_contextPath) === 0 && (settings.dataType === 'JSON' || settings.dataType === 'json')){
  14. if(xhr.status == 200 && xhr.responseText){
  15. try{
  16. var reObj = JSON.parse(xhr.responseText);
  17. //特殊code 没有权限 和token失效
  18. if(reObj && (reObj.code==3001 || reObj.code==3002 )){
  19. window.setTimeout(function () {
  20. if($(".layui-layer-dialog.layui-layer-msg:visible").length < 1){
  21. layer.alert(reObj.message, {icon: 2}, function () {
  22. if(reObj.code==3001){
  23. var topWindow = parent ? (parent.parent ? (parent.parent.parent ? parent.parent.parent : parent.parent) : parent) : window;
  24. topWindow.location.href='/login.html';
  25. }
  26. });
  27. }
  28. }, 500);
  29. }
  30. }catch (e){console.error(e)}
  31. }
  32. }
  33. });
  34. }

项目中ajax自动设置 token 请求头,接口响应code的统一处理

相关推荐