axios 处理 302 状态码的解决方法


Posted in Javascript onApril 10, 2018

比如说浏览器打开了一个单页面(SPA)应用,过了一段时间token(或者session)过期了,这个时候页面上发起 Ajax请求之后,后端返回302状态码跳转到login页面。 我这是使用的是 Vue + axios ,发现 axios 无法拦截到 302请求,下面是处理的过程。

思考

google axios 302 handle 看到 axios github 上的两个讨论

•  https://github.com/axios/axios/issues/932

•  https://github.com/axios/axios/issues/980

得到的结论就是:浏览器发送的ajax请求,服务端返回了302状态码,浏览器会自行跳转,我们无法通过 js 库(jquery, axios) 直接得到并自定义处理流程,只能等到浏览器重定向之后的url获取相应信息。

axios 发送ajax -->
server 返回302和location -->
浏览器请求新的url -->
服务端返回200 -->

axios 获取结果

那么怎么解决呢?需要服务端配合解决

Brower (ajax and not auth) -->
server判断是ajax请求,未登陆,返回 401状态码 -->
浏览器 axios 拦截401,并且通过js 跳转到 /login

解决

浏览器端, axios 增加拦截器

axios.interceptors.response.use((response) => {
  return response;
}, function (error) {
  if (401 === error.response.status) {
    window.location = '/login';
  } else {
    return Promise.reject(error);
  }
});
axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

后端代码,使用flask框架,看个流程就行,验证请求是否是 ajax 和 未登陆,然后返回401状态码

from flask import Blueprint, request, jsonify, make_response, abort
from flask_login.utils import current_user, current_app
apibp = Blueprint('api', 'api_bp')
# 主要逻辑
def bp_login_required():
  if not current_user.is_authenticated:
    if request.is_xhr:
      abort(401)
    else:
      return current_app.login_manager.unauthorized()
apibp.before_request(bp_login_required)
@apibp.route("/report/domains/<month>/", methods=["GET"])
def monthly_domains(month):
  return jsonify({})
ref

•   https://github.com/axios/axios/issues/690

总结

以上所述是小编给大家介绍axios 处理 302 状态码的解决方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jquery的ajax从纯真网(cz88.net)获取IP地址对应地区名
Dec 02 Javascript
深入理解Javascript动态方法调用与参数修改的问题
Dec 10 Javascript
2014年最火的Node.JS后端框架推荐
Oct 27 Javascript
JavaScript获取表单内所有元素值的方法
Apr 02 Javascript
png在IE6 下无法透明的解决方法汇总
May 21 Javascript
javascript实现连续赋值
Aug 10 Javascript
js实现延时加载Flash的方法
Nov 26 Javascript
10个最优秀的Node.js MVC框架
Aug 24 Javascript
解决html-jquery/js引用外部图片时遇到看不了或出现403的问题
Sep 22 jQuery
react在安卓中输入框被手机键盘遮挡问题的解决方法
Sep 03 Javascript
JavaScript ES2019中的8个新特性详解
Feb 20 Javascript
JS模拟浏览器实现全局搜索功能
Sep 11 Javascript
vue.js中npm安装教程图解
Apr 10 #Javascript
vue实现验证码按钮倒计时功能
Apr 10 #Javascript
vue 微信授权登录解决方案
Apr 10 #Javascript
详解给Vue2路由导航钩子和axios拦截器做个封装
Apr 10 #Javascript
详解webpack 打包文件体积过大解决方案(code splitting)
Apr 10 #Javascript
Angular CLI在Angular项目中如何使用scss详解
Apr 10 #Javascript
vue2.0+koa2+mongodb实现注册登录
Apr 10 #Javascript
You might like
简单的过滤字符串中的HTML标记
2006/12/25 PHP
php 模拟GMAIL,HOTMAIL(MSN),YAHOO,163,126邮箱登录的详细介绍
2013/06/18 PHP
wamp安装后自定义配置的方法
2014/08/23 PHP
让whoops帮我们告别ThinkPHP6的异常页面
2020/03/02 PHP
javascript 面向对象全新理练之原型继承
2009/12/03 Javascript
JavaScript DOM学习第四章 getElementByTagNames
2010/02/19 Javascript
JavaScript 数组运用实现代码
2010/04/13 Javascript
javascript多种数据类型表格排序代码分析
2010/09/11 Javascript
jquery预览图片实现鼠标放上去显示实际大小
2014/01/16 Javascript
jQuery实现表单提交时判断的方法
2014/12/13 Javascript
javascript实现单击和双击并存的方法
2014/12/13 Javascript
chrome浏览器当表单自动填充时如何去除浏览器自动添加的默认样式
2015/10/09 Javascript
再次谈论Javascript中的this
2016/06/23 Javascript
微信小程序 前端源码逻辑和工作流详解
2016/10/08 Javascript
JS实现拖拽的方法分析
2016/12/20 Javascript
Javascript中return的使用与闭包详解
2017/01/11 Javascript
解决ajax不能访问本地文件问题(利用js跨域原理)
2017/01/24 Javascript
JavaScript登录记住密码操作(超简单代码)
2017/03/22 Javascript
JS实现AES加密并与PHP互通的方法分析
2017/04/19 Javascript
微信小程序实现滑动操作代码
2020/04/23 Javascript
[01:00:49]DOTA2-DPC中国联赛 正赛 Ehome vs iG BO3 第二场 1月31日
2021/03/11 DOTA
python的dict,set,list,tuple应用详解
2014/07/24 Python
跟老齐学Python之Python安装
2014/09/12 Python
python函数局部变量用法实例分析
2015/08/04 Python
python实现SOM算法
2018/02/23 Python
基于Django的乐观锁与悲观锁解决订单并发问题详解
2019/07/31 Python
Python 2.6.6升级到Python2.7.15的详细步骤
2020/12/14 Python
俄罗斯珠宝市场的领导者之一:Бронницкий ювелир
2019/10/02 全球购物
护理学专业推荐信
2013/12/03 职场文书
分公司总经理岗位职责
2014/08/03 职场文书
公安机关党的群众路线教育实践活动剖析材料
2014/10/10 职场文书
2015年农村党员干部主题教育活动总结
2015/03/25 职场文书
2015年行政助理工作总结
2015/04/30 职场文书
如何使用JavaScript策略模式校验表单
2021/04/29 Javascript
MySQL 时间类型的选择
2021/06/05 MySQL
基于Apache Hudi在Google云构建数据湖平台的思路详解
2022/04/07 Servers