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 相关文章推荐
node.js中的fs.readFile方法使用说明
Dec 15 Javascript
javascript 动态创建表格的2种方法总结
Mar 04 Javascript
如何实现chrome浏览器关闭页面时弹出“确定要离开此面吗?”
Mar 05 Javascript
第四篇Bootstrap网格系统偏移列和嵌套列
Jun 21 Javascript
AngularJS 执行流程详细介绍
Aug 18 Javascript
Angularjs手动解析表达式($parse)
Oct 12 Javascript
Angular.js中数组操作的方法教程
Jul 31 Javascript
捕获未处理的Promise错误方法
Oct 13 Javascript
实时监控input框,实现输入框与下拉框联动的实例
Jan 23 Javascript
微信上传视频文件提示(推荐)
Nov 22 Javascript
微信小程序 wxParse插件显示视频问题
Sep 27 Javascript
vue实现简易的双向数据绑定
Dec 29 Vue.js
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 和 XML: 使用expat函数(一)
2006/10/09 PHP
非常好用的两个PHP函数 serialize()和unserialize()
2012/02/04 PHP
CI框架在CLI下执行占用内存过大问题的解决方法
2014/06/17 PHP
PHP日志LOG类定义与用法示例
2018/09/06 PHP
jQuery 遍历json数组的实现代码
2020/09/22 Javascript
jQuery 获取对象 根据属性、内容匹配, 还有表单元素匹配
2010/05/31 Javascript
javascript中动态函数用法实例分析
2015/05/14 Javascript
JavaScript中for循环的使用详解
2015/06/03 Javascript
浅析Node.js的Stream模块中的Readable对象
2015/07/29 Javascript
JavaScript+html5 canvas绘制渐变区域完整实例
2016/01/26 Javascript
js清除浏览器缓存的几种方法
2017/03/15 Javascript
vue2.0获取鼠标位置的方法
2018/09/13 Javascript
小程序测试后台服务的方法(ngrok)
2019/03/08 Javascript
JS apply用法总结和使用场景实例分析
2020/03/14 Javascript
JS 创建对象的模式实例小结
2020/04/28 Javascript
[01:03:13]VG vs Pain 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
[02:42]岂曰无衣,与子同袍!DOTA2致敬每一位守护人
2020/02/17 DOTA
[03:11]不朽宝藏三外观展示
2020/09/18 DOTA
python调用百度语音REST API
2018/08/30 Python
python 分离文件名和路径以及分离文件名和后缀的方法
2018/10/21 Python
对Django的restful用法详解(自带的增删改查)
2019/08/28 Python
关于Python字符串显示u...的解决方式
2020/03/06 Python
使用 prometheus python 库编写自定义指标的方法(完整代码)
2020/06/29 Python
canvas烟花特效锦集
2018/01/17 HTML / CSS
html5 Canvas画图教程(5)—canvas里画曲线之arc方法
2013/01/09 HTML / CSS
HTML5 Canvas+JS控制电脑或手机上的摄像头实例
2014/05/03 HTML / CSS
Space NK美国站:英国高端美妆护肤商城
2017/05/22 全球购物
小女主人连衣裙:Little Mistress
2017/07/10 全球购物
Java如何读取CLOB字段
2013/10/10 面试题
俞敏洪一分钟演讲稿
2014/08/26 职场文书
乡镇镇长个人整改措施
2014/10/01 职场文书
群众路线教育党员自我剖析材料
2014/10/06 职场文书
个人股份转让协议书范本
2014/10/26 职场文书
自我评价优缺点范文
2015/03/11 职场文书
在校证明模板
2015/06/17 职场文书
安全生产学习心得体会
2016/01/18 职场文书