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请求data显示在GridView上(asp.net)
Aug 27 Javascript
jQuery 选择同时包含两个class的元素的实现方法
Jun 01 Javascript
浅谈jquery拼接字符串效率比较高的方法
Feb 22 Javascript
JavaScript函数节流的两种写法
Apr 07 Javascript
设置cookie指定时间失效(实例代码)
May 28 Javascript
基于JavaScript实现微信抢红包功能
Jul 20 Javascript
通过fastclick源码分析彻底解决tap“点透”
Dec 24 Javascript
浅谈vue-router 路由传参的方法
Dec 27 Javascript
vue2.0 根据状态值进行样式的改变展示方法
Mar 13 Javascript
vue对storejs获取的数据进行处理时遇到的几种问题小结
Mar 20 Javascript
详细分析Node.js 模块系统
Jun 28 Javascript
详解JS数组方法
Nov 20 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
php MySQL与分页效率
2008/06/04 PHP
PHP下使用CURL方式POST数据至API接口的代码
2013/02/14 PHP
PHP保存session到memcache服务器的方法
2016/01/19 PHP
Laravel5权限管理方法详解
2016/07/26 PHP
php字符集转换
2017/01/23 PHP
Laravel实现定时任务的示例代码
2017/08/10 PHP
JavaScript 浮点数运算 精度问题
2009/10/06 Javascript
Extjs学习笔记之三 extjs form更多的表单项
2010/01/07 Javascript
基于jquery的超简单上下翻
2010/04/20 Javascript
Jquery下:nth-child(an+b)的使用注意
2011/05/28 Javascript
Javascript中自动切换焦点实现代码
2012/12/15 Javascript
javascript 树形导航菜单实例代码
2013/08/13 Javascript
node.js中使用socket.io的方法
2014/12/15 Javascript
angularJS提交表单(form)
2015/02/09 Javascript
分享Javascript实用方法二
2015/12/13 Javascript
JS打印组合功能
2016/08/04 Javascript
详解用场景去理解函数柯里化(入门篇)
2019/04/11 Javascript
javascript实现图片轮播代码
2019/07/09 Javascript
小程序中英文混合排序问题解决
2019/08/02 Javascript
在layui中对table中的数据进行判断(0、1)转换为提示信息的方法
2019/09/28 Javascript
Python中struct模块对字节流/二进制流的操作教程
2017/01/21 Python
python3获取两个日期之间所有日期,以及比较大小的实例
2018/04/08 Python
python实现从文件中读取数据并绘制成 x y 轴图形的方法
2018/10/14 Python
opencv3/python 鼠标响应操作详解
2019/12/11 Python
python实现批量修改文件名
2020/03/23 Python
python实现人机五子棋
2020/03/25 Python
Python的信号库Blinker用法详解
2020/12/31 Python
美国著名的团购网站:Woot
2016/08/02 全球购物
军校本科大学生自我评价
2014/01/14 职场文书
大学生自我鉴定范文模板
2014/01/21 职场文书
重阳节演讲稿:尊敬帮助老人 弘扬传统美德
2014/09/25 职场文书
影视后期实训报告
2014/11/05 职场文书
党支部对转正的意见
2015/06/02 职场文书
爸爸的三轮车观后感
2015/06/16 职场文书
经营场所使用证明
2015/06/19 职场文书
SQL CASE 表达式的具体使用
2022/03/21 SQL Server