在Vue中如何使用axios请求拦截

210

一、前言

axios的基础使用就不过多的讲解啦,如何使用可以看axios文档使用说明·Axios中文说明

在这里和大家分享一下axios拦截在实际项目中的使用

很多人都看过axios的官方文档中拦截器这一栏,有的人可能会有点懵,因为文档只告诉你有这个东西,而不告诉你在什么情况下使用。很多初学者就会放弃使用axios拦截器,毕竟拦截器是可以不使用的,但是使用拦截器,会在页面中减少很多不必要的代码。

二、说在前面的

项目使用的ui框架是iview

以下友好提示均使用iview ui的message提示组件,例如this.$Message.xxx
/api/request 仅仅只是例子接口,实际开发用后台提供的接口。
code是后台状态码,我这里也只是例子,不要问我为毛我的返回码和你的怎么不一样这样的问题哈...这些都需要和后台沟通约定的。
使用的请求头是:axios.defaults.headers['Content-Type'] = 'application/x-www-form-urlencoded';至于为什么使用这个请求头可以看看我的另外一篇文章关于axios会发送两次请求,有个OPTIONS请求的问题
因为使用的是这个请求头所以需要用qs模块,不然后台不认这个数据。

三、不使用请求拦截

如果不使用请求拦截,也是可以的,但是会多了非常多的代码,我们以登录页为例。


一个单纯,没有花里胡哨的页面,|ω・)

//双向数据绑定获取值
let httpRequest = {};
httpRequest.loginName = this.loginName
httpRequest.password= this.password

this.$axios.post("/api/request", this.$qs.stringify(httpRequest)).then(data => {
    //特殊错误处理,状态为10时为登录超时
    if(data.data.code === 10){
        this.$Message.error("登录已超时,请重新登录")
        this.$router.push("/login")
    //其余错误状态处理    
    }else if(data.data.code != 0){
        this.$Message.error(data.data.msg)
    //请求成功
    }else if(data.data.code === 0){
        //进行成功业务逻辑
    }
    //.......
});

如果不使用请求拦截,那么对每一条请求每一个状态都要特殊处理,如果请求特殊状态有数十个,每个页面有很多请求,那么页面会变得很长很臃肿,不好维护。

三、使用请求拦截

相同的请求返回代码我们可以抽取出来,写在请求拦截中
当我们设置了拦截之后,在我们的组件代码中可以简化很多,还是以登录界面为例:

main.js

//请求发送拦截,把数据发送给后台之前做些什么......
axios.interceptors.request.use((request) => {

  //这个例子中data是loginName和password
  let REQUEST_DATA = request.data
  //统一进行qs模块转换
  request.data = qs.stringify(REQUEST_DATA)
  //再发送给后台
  return request;

}, function (error) {
  // Do something with request error
  return Promise.reject(error);
});

//请求返回拦截,把数据返回到页面之前做些什么...
axios.interceptors.response.use((response) => {
  //特殊错误处理,状态为10时为登录超时
  if (response.data.code === 10) {
    iView.Message.error("登录已超时,请重新登录");
    router.push("/login")
  //其余错误状态处理    
  } else if (response.data.code != 0) {
    iView.Message.error(response.data.msg)
  //请求成功
  } else if(response.data.code === 0){
    //将我们请求到的信息返回页面中请求的逻辑
    return response;
  }
 //......

}, function (error) {
  return Promise.reject(error);
});
//双向数据绑定获取值
let httpRequest = {};
httpRequest.loginName = this.loginName
httpRequest.password= this.password

this.$axios.post("/api/request", httpRequest).then(data => {
    //这是要先判断data,如果请求的数据状态code不为0,会被拦截,则data为undefined
    if(data){
        //进行请求返回成功逻辑
    }
});

这样我们就对axios请求添加了拦截,可以减少很多代码逻辑,页面可读性更高,可维护性也更高

四、其他

这就是axios拦截的最基础的用法,当然也不止于此,我们也可以进行扩展延伸,做更多的事情,只要你的业务有需求,axios拦截总能帮到你,这些就需要举一反三,工具是死的人是活的,我可以再举个小例子,比如设置请求签名

请求签名是前台和后台约定的一种沟通方式,对数据进行加密,可以一定程度上保证数据的安全性

还是以这个登录页面为例

//双向数据绑定获取值
let httpRequest = {};
httpRequest.loginName = this.loginName
httpRequest.password= this.password

this.$axios.post("/api/request", httpRequest).then(data => {
    //这是要先判断data,如果请求的数据状态code不为0,会被拦截,则data为undefined
    if(data){
        //进行请求返回成功逻辑
    }
});

我们把httpRequest这个data信息数据发送给后台之前,进行签名,并加密数据
main.js中,我们对发送的数据进行拦截

//请求发送拦截
axios.interceptors.request.use((request) => {

  //获取请求的数据,这里是loginName和password
  let REQUEST_DATA = request.data
  //获取请求的地址,这里是/api/request
  let REQUEST_URL = request.url
   
  //设置签名并进行qs转换,且赋值给request的data,签名函数另外封装
  request.data = qs.stringify(requestDataFn(REQUEST_DATA, REQUEST_URL))
  //发送请求给后台
  return request;

}, function (error) {
  // Do something with request error
  return Promise.reject(error);
});

//已封装好的签名函数
function requestDataFn(data, method) {

  let postData = {}

  //时间戳,时间戳函数不作展示,也是已封装好的
  postData.timestamp = getNowFormatDate();

  //请求用户的session以及secretKey信息,为空是未登录,登录后我把它存在localStorage中,这个存在哪里都可以,这里只作为例子。
  postData.session = localStorage.getItem('session') || '';
  postData.secretKey = localStorage.getItem('secretKey') || '';
  
  //请求的地址,这里是/api/request
  postData.method = method;
    
  //请求的数据这里是loginName和password,进行base64加密
  let base64Data = Base64.encode(JSON.stringify(data));
   
  //设置签名并进行md5加密
  let signature = md5.hex(postData.secretKey + base64Data + postData.method + postData.session + postData.timestamp + postData.secretKey);
   
  //把数据再次进行加密
  postData.data = encodeURI(base64Data);

  postData.signature = signature;
   
  return postData
}

这样我们就完成了对数据加密以及签名,这样再发送给后台。

注意:这里只作为例子展示,如果需要用到签名,如何签名,是前台和后台沟通的结果!
axios请求拦截的用处远远不止这样,具体如何使用,还需要在实际工作,实际项目中随机应变啦。

如果对你有帮助请点赞收藏支持一下,有什么疑问欢迎留言,有错误欢迎大力指出

你可能感兴趣的

13 条评论
RNG牛逼 · 2018年10月25日

可以转载么

回复

0

随意,注明来源就好。

你响度讲D咩嘢 作者 · 2018年10月26日
虾哔哔 · 2018年10月26日

加密的话一般不会统一在请求拦截器里面做吧,更多的还是携带token验证等,楼主可以补充下

回复

0

你说的token就是我这里的session和secretKey,而且是两个一起验证,我对session和secretKey还进行了加密以及签名。如果只使用token进行验证可能安全性没有那么高。

你响度讲D咩嘢 作者 · 2018年10月26日
66beta · 2018年11月12日

前端签名、加密 XD

回复

0

前端加密只能防君子不能防小人,或者大佬有没有更好的前后端分离的加密方法,毕竟没有控制层。

你响度讲D咩嘢 作者 · 2018年11月12日
0

@你响度讲D咩嘢 登录时让后端返回token,前端使用该token进行签名加密,然后后端验证。

visual_hu · 2018年11月13日
Shay · 2018年11月30日

想问下,在发送拦截的时候使用qs模块转换,这个qs的具体作用是什么呢?是转换格式吗?是不管用不用拦截的时候都要使用qs吗?因为我现在使用axios没有使用发送拦截只使用了返回拦截。并没有使用qs模块,但是没有任何报错。

回复

0

是转换格式,因为我没用json的请求头,原因可以看我另外一篇文章,我使用的是application/x-www-form-urlencoded这个请求头,直接发送请求会出现后台不认数据的情况,所以需要qs模块进行转换。

你响度讲D咩嘢 作者 · 2018年11月30日
0

@你响度讲D咩嘢 恩呢,我看了那篇了,可是这个OPTION请求应该是在开发模式下才有吧?打包后,访问的接口都没有OPTION这个请求。

Shay · 2018年12月03日
0

@Shay 如果是JSON的请求头,线上也会发送option的请求,至少我之前写的项目是这样的。

你响度讲D咩嘢 作者 · 2018年12月03日
狼丶宇先生 · 2018年12月26日

楼主写的也不错,小生在此借楼一用,关于拦截器,我封装了一个http模块,可以参考这篇文章,我用#CSDN#这个app发现了有技术含量的博客,小伙伴们求同去《基于Vue和ElementUI/vue-router 和 vuex的后台管理系统基础脚手架》, 一起来围观吧 https://blog.csdn.net/qq_3327...

回复

载入中...