vue——axios拦截器的简单介绍及使用场景

原创 minsong 随笔 Vue 601阅读 2018-05-23 17:23:26 举报

1.axios拦截器简单介绍

如果之后想移除拦截器你可以这么做

2.vue添加axios拦截器

1.安装 axios
npm install axios --save-dev

2.新建文件 axios.js

3.在main.js中进行引用,并配置一个别名($ajax)来进行调用:

4.应用,一个登录的post如:

3.使用场景

3.1 axios拦截器对路由进行拦截

针对登录拦截逻辑来看一下
1.路由拦截
首先在定义路由的时候就需要多添加一个自定义字段requireAuth,用于判断该路由的访问是否需要登录。如果用户已经登录,则顺利进入路由,否则就进入登录页面。

定义完路由后,我们主要是利用vue-router提供的钩子函数beforeEach()对路由进行判断。

其中,to.meta中是我们自定义的数据,其中就包括我们刚刚定义的requireAuth字段。通过这个字段来判断该路由是否需要登录权限。需要的话,同时当前应用不存在token,则跳转到登录页面,进行登录。登录成功后跳转到目标路由。
登录拦截到这里就结束了吗?并没有。这种方式只是简单的前端路由控制,并不能真正阻止用户访问需要登录权限的路由。还有一种情况便是:当前token失效了,但是token依然保存在本地。这时候你去访问需要登录权限的路由时,实际上应该让用户重新登录。
这时候就需要结合 http 拦截器 + 后端接口返回的http 状态码来判断。

2.拦截器
要想统一处理所有http请求和响应,就得用上 axios 的拦截器。通过配置http response inteceptor,当后端接口返回401 Unauthorized(未授权),让用户重新登录。

3.2 axios拦截器对http请求的响应状态统一进行处理

首先我们要明白设置拦截器的目的是什么,当我们需要统一处理http请求和响应时我们通过设置拦截器处理方便很多.
这个项目我引入了element ui框架,所以我是结合element中loading和message组件来处理的.我们可以单独建立一个http的js文件处理axios,再到main.js中引入.

3.3 axios拦截器对重复请求的处理

axios官方文档上给了两种取消请求的方式。
轻查看:vue axios 在切换路由时如何取消所有请求——cancelToken
根据文档上的第二种方法,我们可以在拦截器里统一处理取消重复请求

同一个请求,没有完成的请求将被取消

利用这个方法,一方面可以防止重复点击不同页码导致的表格数据闪烁,另外可以做实时搜索,始终获取最新结果。

最后取消重复请求会有些问题。第二次请求时后台已经接收到了请求。还是会生成2次相同的数据。下面是对应的处理:

第一种适合tabs,分页等快速来回点击的情况,取消之前的请求,保持最近的一次请求。
第二种适合相同的接口被请求了多次,只留第一次,其他的都取消请求。

评论 ( 1 )
最新评论
丕丕 2018-05-24 08:32:51 1F

太多了,没时间,晚上看看