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 相关文章推荐
用JavaScript脚本实现Web页面信息交互
Dec 21 Javascript
基于jQuery的让非HTML5浏览器支持placeholder属性的代码
May 24 Javascript
JS复制到剪贴板示例代码
Oct 30 Javascript
javascript计算星座属相(十二生肖属相)示例代码
Jan 09 Javascript
JavaScript在IE和FF下的兼容性问题
May 19 Javascript
JS实现3D图片旋转展示效果代码
Sep 22 Javascript
基于javascript实现图片懒加载
Jan 05 Javascript
jQuery实现可展开折叠的导航效果示例
Sep 12 Javascript
用JS实现根据当前时间随机生成流水号或者订单号
May 31 Javascript
javascript原型链学习记录之继承实现方式分析
May 01 Javascript
JS+html5实现异步上传图片显示上传文件进度条功能示例
Nov 09 Javascript
详解Java中String JSONObject JSONArray List转换
Nov 13 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实现多图上传(结合uploadify插件)思路分析
2016/11/30 PHP
(jQuery,mootools,dojo)使用适合自己的编程别名命名
2010/09/14 Javascript
Firefox中autocomplete=&quot;off&quot; 设置不起作用Bug的解决方法
2011/03/25 Javascript
JavaScript高级程序设计 错误处理与调试学习笔记
2011/09/10 Javascript
JS+ACTIVEX实现网页选择本地目录路径对话框
2013/03/18 Javascript
jquery 获取dom固定元素 添加样式的简单实例
2014/02/04 Javascript
jQuery实现DIV层淡入淡出拖动特效的方法
2015/02/13 Javascript
浅谈JavaScript中运算符的优先级
2015/07/07 Javascript
jQuery实现分章节锚点“回到顶部”动画特效代码
2015/10/23 Javascript
js实现拖拽功能
2017/03/01 Javascript
vue2.0的contextmenu右键弹出菜单的实例代码
2017/07/24 Javascript
Angular中的$watch方法详解
2017/09/18 Javascript
vue弹窗消息组件的使用方法
2020/09/24 Javascript
npm配置国内镜像资源+淘宝镜像的方法
2018/09/07 Javascript
iview Upload组件多个文件上传的示例代码
2018/09/30 Javascript
element上传组件循环引用及简单时间倒计时的实现
2018/10/01 Javascript
React 实现拖拽功能的示例代码
2019/01/06 Javascript
详解Vue中watch对象内属性的方法
2019/02/01 Javascript
深入浅析nuxt.js基于ssh的vue通用框架
2019/05/21 Javascript
微信小程序select下拉框实现源码
2019/11/08 Javascript
python实现扫描日志关键字的示例
2018/04/28 Python
详解Python基础random模块随机数的生成
2019/03/23 Python
Django 对IP访问频率进行限制的例子
2019/08/30 Python
python实现用类读取文件数据并计算矩形面积
2020/01/18 Python
Python range与enumerate函数区别解析
2020/02/28 Python
django 外键创建注意事项说明
2020/05/20 Python
python 模拟登陆163邮箱
2020/12/15 Python
瑞士灯具购物网站:Lampenwelt.ch
2018/07/08 全球购物
天网面试题
2013/04/07 面试题
人力资源经理的岗位职责范本
2014/02/28 职场文书
经典广告词大全
2014/03/14 职场文书
公司担保书格式范文
2014/05/12 职场文书
股份转让协议书范本
2015/01/27 职场文书
2015年医生个人工作总结
2015/04/25 职场文书
python3 sqlite3限制条件查询的操作
2021/04/07 Python
python实现简单聊天功能
2021/07/07 Python