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自动显示最后更新时间
Mar 15 Javascript
use jscript List Installed Software
Jun 11 Javascript
让firefox支持IE的一些方法的javascript扩展函数代码
Jan 02 Javascript
javascript的数据类型、字面量、变量介绍
May 23 Javascript
javascript Array 数组常用方法
Apr 05 Javascript
js实现的后台左侧管理菜单代码
Sep 11 Javascript
JavaScript队列、优先队列与循环队列
Nov 14 Javascript
各种选择框jQuery的选中方法(实例讲解)
Jun 27 jQuery
clipboard.js在移动端复制失败的解决方法
Jun 13 Javascript
SVG实现时钟效果
Jul 17 Javascript
小程序数据通信方法大全(推荐)
Apr 15 Javascript
js针对图片加载失败的处理方法分析
Aug 24 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结合web uploader插件实现分片上传文件
2016/05/10 PHP
理清PHP在Linxu下执行时的文件权限方法
2017/06/07 PHP
thinkPHP框架实现的简单计算器示例
2018/12/07 PHP
收藏Javascript中常用的55个经典技巧
2007/08/12 Javascript
JavaScript中的一些定位属性[图解]
2010/07/14 Javascript
jQuery Select(单选) 模拟插件 V1.3.62 改进版
2010/07/17 Javascript
JQuery调webservice实现邮箱验证(检测是否可用)
2013/05/21 Javascript
javascript转换静态图片,增加粒子动画效果
2015/05/28 Javascript
javascript生成不重复的随机数
2015/07/17 Javascript
Javascript小技能总结(推荐)
2016/06/02 Javascript
JS检测是否可以访问公网服务器功能代码
2017/06/19 Javascript
关于JavaScript的单双引号嵌套问题
2017/08/20 Javascript
BootStrap模态框和select2合用时input无法获取焦点的解决方法
2017/09/01 Javascript
详解webpack 打包文件体积过大解决方案(code splitting)
2018/04/10 Javascript
Node错误处理笔记之挖坑系列教程
2018/06/05 Javascript
Canvas实现微信红包照片效果
2018/08/21 Javascript
关于layui时间回显问题的解决方法
2019/09/24 Javascript
JavaScript代码压缩工具UglifyJS和Google Closure Compiler的基本用法
2020/04/13 Javascript
django接入新浪微博OAuth的方法
2015/06/29 Python
深入理解Python中的*重复运算符
2017/10/28 Python
python编写微信远程控制电脑的程序
2018/01/05 Python
django.db.utils.ProgrammingError: (1146, u“Table‘’ doesn’t exist”)问题的解决
2018/07/13 Python
Django migrations 默认目录修改的方法教程
2018/09/28 Python
Python使用paramiko操作linux的方法讲解
2019/02/25 Python
泰国折扣酒店预订:Hotels2Thailand
2018/03/20 全球购物
马德里竞技官方网上商店:Atletico Madrid Shop
2019/03/31 全球购物
英语简历自我评价
2014/01/26 职场文书
艺术设计专业个人求职信
2014/04/10 职场文书
捐献物资倡议书范文
2014/05/19 职场文书
数学教育专业求职信
2014/07/22 职场文书
优秀班组申报材料
2014/12/25 职场文书
英语教师个人总结
2015/02/09 职场文书
拖欠货款起诉状
2015/05/20 职场文书
同学会感言
2015/07/30 职场文书
解决golang在import自己的包报错的问题
2021/04/29 Golang
Python中OpenCV实现简单车牌字符切割
2021/06/11 Python