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 相关文章推荐
javascript获取当前日期时间及其它操作函数
Jan 11 Javascript
jQuery源码分析-03构造jQuery对象-源码结构和核心函数
Nov 14 Javascript
设置checkbox为只读(readOnly)的两种方式
Oct 11 Javascript
JS实现文件动态顺序载入的方法
Mar 07 Javascript
Bootstrap菜单按钮及导航实例解析
Sep 09 Javascript
JS实现二叉查找树的建立以及一些遍历方法实现
Apr 17 Javascript
关于vue.extend和vue.component的区别浅析
Aug 16 Javascript
Scala解析Json字符串的实例详解
Oct 11 Javascript
javascript 判断用户有没有操作页面
Oct 17 Javascript
bootstrap table表格插件之服务器端分页实例代码
Sep 12 Javascript
使用Vue CLI创建typescript项目的方法
Aug 09 Javascript
Javascript call及apply应用场景及实例
Aug 26 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
综合图片计数器
2006/10/09 PHP
php session 错误
2009/05/21 PHP
elgg 获取文件图标地址的方法
2010/03/20 PHP
PHP进行批量任务处理不超时的解决方法
2016/07/11 PHP
一个tab标签切换效果代码
2009/03/27 Javascript
基于jQuery实现的当离开页面时出现提示的实现代码
2011/06/27 Javascript
js中的getAttribute方法使用示例
2014/08/01 Javascript
通过location.replace禁止浏览器后退防止重复提交
2014/09/04 Javascript
JavaScript中setMonth()方法的使用详解
2015/06/11 Javascript
js闭包所用的场合以及优缺点分析
2015/06/22 Javascript
浅析JavaScript作用域链、执行上下文与闭包
2016/02/01 Javascript
JS使用eval()动态创建变量的方法
2016/06/03 Javascript
在windows上用nodejs搭建静态文件服务器的简单方法
2016/08/11 NodeJs
JS中页面与页面之间超链接跳转中文乱码问题的解决办法
2016/12/15 Javascript
vue中实现回车键登录功能
2020/02/19 Javascript
vue-cli3访问public文件夹静态资源报错的解决方式
2020/09/02 Javascript
[01:46]TI4西雅图DOTA2前线报道 中国选手抱团调时差
2014/07/08 DOTA
Python+django实现文件下载
2016/01/17 Python
Python中不同进制的语法及转换方法分析
2016/07/27 Python
Python实现求数列和的方法示例
2018/01/12 Python
Python对列表的操作知识点详解
2019/08/20 Python
使用apiDoc实现python接口文档编写
2019/11/19 Python
Python基础之高级变量类型实例详解
2020/01/03 Python
python检查目录文件权限并修改目录文件权限的操作
2020/03/11 Python
python实现mask矩阵示例(根据列表所给元素)
2020/07/30 Python
Prometheus开发中间件Exporter过程详解
2020/11/30 Python
美国女鞋品牌:naturalizer(娜然)
2016/08/01 全球购物
OSPREY LONDON官网:英国本土皮具品牌
2019/05/31 全球购物
俄罗斯珠宝市场的领导者之一:Бронницкий ювелир
2019/10/02 全球购物
《临死前的严监生》教学反思
2014/02/13 职场文书
新书发布会策划方案
2014/06/09 职场文书
房产授权委托书范本
2014/09/22 职场文书
会议接待欢迎标语
2014/10/08 职场文书
第二批党的群众路线教育实践活动总结报告
2014/10/30 职场文书
银行服务理念口号
2015/12/25 职场文书
PHP实现创建以太坊钱包转账等功能
2021/04/21 PHP