vue ajax 拦截原理与实现方法示例


Posted in Javascript onNovember 29, 2019

本文实例讲述了vue ajax 拦截原理与实现方法。分享给大家供大家参考,具体如下:

概要说明

在开发的过程中,我们需要通过AJAX请求,访问后台获取数据,这个获取数据的时候,当然需要后台需要时登录状态才能访问数据,当没有登录的情况,这个时候我们需要跳转到登录界面进行登录。

如果每次请求都要做如下处理,我们程序逻辑将无比混乱,ajax 可以为我们解决这个问题。

具体实现思路是:

1.发送ajax 请求访问后端数据。

2.后端如果发现没有登录,那么将会丢出一个exceptionaction 的http 响应头。

3.这个判断将在ajax 拦截中处理,只要有这个响应头,我们会检查是否有登录token,如果没有就会去到登录界面,如果有则尝试使用token自动登录。

这个过程将在拦截中完成。

这个好处是 客户只需要关注业务代码的编写,登录处理放到拦截中处理,而且所有的请求将都会被拦截。

实现代码

const axiosInstance = axios.create({
  timeout: 20000,
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded',
    'X-Requested-With': 'XMLHttpRequest'
  }
});

axios 是我们访问后台的JS框架。

定义拦截处理。

function interceptAjax(res){
  var tmp = res.headers["exceptionaction"];
  if(!tmp) return res;
  //系统已经登录。
  var token = RxUtil.getCache("token");
  if(!token) {
    router.push({
      name: "login"
    });
    return;
  }

使用拦截器。

axiosInstance.interceptors.response.use(res=>interceptAjax(res));

这样每次访问都会经过拦截器,这也给我们一些思路,一些需要统一验证的的访问,可以通过拦截器进行处理。

希望本文所述对大家vue.js程序设计有所帮助。

Javascript 相关文章推荐
xmlHTTP实例
Oct 24 Javascript
javascript一点特殊用法
May 28 Javascript
javascript得到XML某节点的子节点个数的脚本
Oct 11 Javascript
URL地址中的#符号使用说明
Feb 12 Javascript
jQuery设置与获取HTML,文本和值的简单实例
Feb 26 Javascript
jQuery获取父元素及父节点的方法小结
Apr 14 Javascript
原生javascript 学习之js变量全面了解
Jul 14 Javascript
Node中使用ES6语法的基础教程
Jan 05 Javascript
JS简单获得节点元素的方法示例
Feb 10 Javascript
解决Vue中引入swiper,在数据渲染的时候,发生不滑动的问题
Sep 27 Javascript
基于node简单实现RSA加解密的方法步骤
Mar 21 Javascript
vue + typescript + 极验登录验证的实现方法
Jun 27 Javascript
VUE 实现动态给对象增加属性,并触发视图更新操作示例
Nov 29 #Javascript
js中关于Blob对象的介绍与使用
Nov 29 #Javascript
js blob类型url的视频下载问题的解决
Nov 29 #Javascript
JavaScript之Blob对象类型的具体使用方法
Nov 29 #Javascript
VuePress 中如何增加用户登录功能
Nov 29 #Javascript
Vue.directive 实现元素scroll逻辑复用
Nov 29 #Javascript
Vue.js实现大屏数字滚动翻转效果
Nov 29 #Javascript
You might like
PHP中SESSION使用中的一点经验总结
2012/03/30 PHP
PHP写的获取各搜索蜘蛛爬行记录代码
2012/08/21 PHP
php 目录遍历、删除 函数的使用介绍
2013/04/28 PHP
php装饰者模式简单应用案例分析
2019/10/23 PHP
php高性能日志系统 seaslog 的安装与使用方法分析
2020/02/29 PHP
js 字符串转换成数字的三种方法
2013/03/23 Javascript
jQuery动态设置form表单的enctype值(实现代码)
2013/07/04 Javascript
跟我学习javascript的严格模式
2015/11/16 Javascript
瀑布流的实现方式(原生js+jquery+css3)
2020/06/28 Javascript
html中鼠标滚轮事件onmousewheel的处理方法
2016/11/11 Javascript
angularJS模态框$modal实例代码
2017/05/27 Javascript
nodejs搭建本地服务器轻松解决跨域问题
2018/03/21 NodeJs
JavaScript继承与多继承实例分析
2018/05/26 Javascript
JavaScript实现Tab选项卡切换
2020/02/13 Javascript
[22:59]VGJ.S vs VG 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
[06:59]DOTA2-DPC中国联赛3月7日Recap集锦
2021/03/11 DOTA
详解Python命令行解析工具Argparse
2016/04/20 Python
对python操作kafka写入json数据的简单demo分享
2018/12/27 Python
在python中获取div的文本内容并和想定结果进行对比详解
2019/01/02 Python
python验证码图片处理(二值化)
2019/11/01 Python
python实现上传文件到linux指定目录的方法
2020/01/03 Python
巧用HTML5给按钮背景设计不同的动画简单实例
2016/08/09 HTML / CSS
size?法国官网:英国伦敦的球鞋精品店
2020/03/15 全球购物
写一个用矩形法求定积分的通用函数
2012/11/08 面试题
介绍一下linux文件系统分配策略
2012/11/17 面试题
客户代表自我评价范例
2013/09/24 职场文书
历史学专业毕业生求职信
2013/09/27 职场文书
实习护士自我鉴定
2013/10/13 职场文书
领导干部培训感言
2014/01/23 职场文书
2014庆六一活动方案
2014/03/02 职场文书
小学二年级学生评语
2014/04/21 职场文书
常务副总经理任命书
2014/06/05 职场文书
暑期社会实践心得体会
2014/09/02 职场文书
工作态度检讨书范文
2015/05/06 职场文书
《小小的船》教学反思
2016/02/18 职场文书
小学六一儿童节活动开幕词
2016/03/04 职场文书