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 相关文章推荐
CSS JavaScript 实现菜单功能 改进版
Dec 09 Javascript
javascript让setInteval里的函数参数中的this指向特定的对象
Jan 31 Javascript
使用JS进行目录上传(相当于批量上传)
Dec 05 Javascript
javascript特殊用法示例介绍
Nov 29 Javascript
Javascript闭包实例详解
Nov 29 Javascript
Jquery 1.9.1源码分析系列(十二)之筛选操作
Dec 02 Javascript
微信小程序 加载 app-service.js 错误解决方法
Oct 12 Javascript
用jQuery.ajaxSetup实现对请求和响应数据的过滤
Dec 20 Javascript
js单页hash路由原理与应用实战详解
Aug 14 Javascript
vue脚手架中配置Sass的方法
Jan 04 Javascript
Vue的属性、方法、生命周期实例代码详解
Sep 17 Javascript
小程序角标的添加及绑定购物车数量进行实时更新的实现代码
Dec 07 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常用代码大全(新手入门必备)
2010/06/29 PHP
PHP中使用curl伪造IP的简单方法
2015/08/07 PHP
浅谈PHP eval()函数定义和用法
2016/06/21 PHP
PHP十六进制颜色随机生成器功能示例
2017/07/24 PHP
PHP命名空间简单用法示例
2018/12/28 PHP
解决AJAX中跨域访问出现'没有权限'的错误
2008/08/20 Javascript
jQuery EasyUI API 中文文档 DateTimeBox日期时间框
2011/10/16 Javascript
Js保留小数点的4种效果实现代码分享
2014/04/12 Javascript
javascript实现单击和双击并存的方法
2014/12/13 Javascript
jQuery仿Flash上下翻动的中英文导航菜单实例
2015/03/10 Javascript
JS实现点击按钮后框架内载入不同网页的方法
2015/05/05 Javascript
js实现字符串转日期格式的方法
2015/05/20 Javascript
Angular实现类似博客评论的递归显示及获取回复评论的数据
2017/11/06 Javascript
浅谈Angular 中何时取消订阅
2017/11/22 Javascript
js登录滑动验证的实现(不滑动无法登陆)
2018/01/03 Javascript
js中对象和面向对象与Json介绍
2019/01/21 Javascript
详解Js里的for…in和for…of的用法
2019/03/28 Javascript
js实现继承的方法及优缺点总结
2019/05/08 Javascript
webpack自动打包和热更新的实现方法
2019/06/24 Javascript
json.stringify()与json.parse()的区别以及用处
2021/01/25 Javascript
[44:26]DOTA2上海特级锦标赛主赛事日 - 2 胜者组第一轮#4EG VS Fnatic第二局
2016/03/03 DOTA
[01:06:43]完美世界DOTA2联赛PWL S3 PXG vs GXR 第二场 12.19
2020/12/24 DOTA
python访问系统环境变量的方法
2015/04/29 Python
Python打印斐波拉契数列实例
2015/07/07 Python
Python2.7简单连接与操作MySQL的方法
2016/04/27 Python
python正向最大匹配分词和逆向最大匹配分词的实例
2018/11/14 Python
python 中Arduino串口传输数据到电脑并保存至excel表格
2019/10/14 Python
使用python和pygame制作挡板弹球游戏
2019/12/03 Python
Window系统下Python如何安装OpenCV库
2020/03/05 Python
Python通过队列来实现进程间通信的示例
2020/10/14 Python
三维科技面试题
2013/07/27 面试题
Can a struct inherit from another class? (结构体能继承类吗)
2014/07/22 面试题
志愿者爱心公益活动策划方案
2014/09/15 职场文书
公安机关党的群众路线教育实践活动剖析材料
2014/10/10 职场文书
机关干部四风问题自我剖析及整改措施
2014/10/26 职场文书
win11怎么消除图标小盾牌?win11消除图标小盾牌解决方法
2022/08/05 数码科技