• 技术文章 >web前端 >js教程

    axios中的302状态码

    php中世界最好的语言php中世界最好的语言2018-06-08 17:30:47原创2051

    这次给大家带来axios中的302状态码,使用axios中302状态码的注意事项有哪些,下面就是实战案例,一起来看一下。

    比如说浏览器打开了一个单页面(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

    相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

    推荐阅读:

    如何使用vue请求本地json

    JS操作JSON数组去重

    以上就是axios中的302状态码的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:axios 状态码
    上一篇:在微信小程序中有关App生命周期(详细教程) 下一篇:自己动手写 PHP MVC 框架(40节精讲/巨细/新人进阶必看)

    相关文章推荐

    • 分享一道不错的TS面试题(含3层),看看能答到第几层!• Node学习之如何最小化堆分配和防止内存泄漏• 一文带你深入了解Node.js(图文详解)• 聊聊Node.js中怎么用async函数• 聊聊Node项目中怎么操作MySQL
    1/1

    PHP中文网