vue拦截器的一次实践
起因
最近在做一个项目前端框架使用的是vue,项目接近尾声的时候发现需要增加一个对所有的http请求过滤的功能,所有的请求需要加上token再发送给服务器,服务器根据token判断用户身份是否有效,响应也需要过滤,判断是否授权,进行统一处理。经过调研发现,很多大佬推荐了vue-resource的interceptors拦截器,但是由于vue的作者尤雨溪已经声明不再对vue-resource进行维护,建议大家使用axios,所以果断pass掉了这个方法。然后发现,axios提供了interceptors关键字实现拦截器的功能,下面就详细说明拦截器的实现。
第一步
在阅读相关资料的时候,有两种方法可以实现拦截器,设置配置文件和重新封装axios,在尝试第一种方法时会出现了无法解决的问题,无果,故采用了重新封装axios的方法,首先在项目文件下新建utils文件夹,在该文件夹下新建文件httpAxios.js。
├── src
|├──example.vue
|└──utils
|├──httpAxios.js
第二步 http请求拦截器,首先对http的请求进行拦截,将所有的http请求报文的header加上Authorization字段,内容为token,token之前通过vuex保存在store中。代码如下:
// http request 拦截器
axios.interceptors.request.use(
(config) => {
if(store.state.token) {
config.headers.Authorization = `${store.state.token}`;
// token保存在store中
}
return config;
},
(err) => {
return Promise.reject(err);
}
);
第三步 【vue拦截器的一次实践】http响应拦截器,对所有response进行判断,401状态码表示未授权,代码如下:
// http response 拦截器
axios.interceptors.response.use(
(response) => {
return response;
},
(error) => {
if(error.response) {
switch (error.response.status) {
case 401:
router.replace({
path: '/login',
query: {redirect: router.currentRoute.fullPath}
});
}
}
return Promise.reject(error.response.data);
}
);
不过我司的授权并不是经过浏览器实现的,是通过约定好的错误码来表示用户登录失效,所以我并没有在error中进行处理,而是在response中判断错误码来处理的。
最后整个httpAxios.js文件的内容是:
import Vue from 'vue';
import axios from 'axios';
import store from '../store/';
// 默认配置
axios.defaults.baseURL = 'http://www.xxxx.com';
axios.defaults.headers.post['Content-Type'] = 'application/json';
export const request = (config) => {
return axios(config);
};
// http request 拦截器
axios.interceptors.request.use(
(config) => {
if(store.state.token) {
config.headers.Authorization = `${store.state.token}`;
// token保存在store中
}
return config;
},
(err) => {
return Promise.reject(err);
}
);
// http response 拦截器
axios.interceptors.response.use(
(response) => {
return response;
},
(error) => {
if(error.response) {
switch (error.response.status) {
case 401:
router.replace({
path: '/login',
query: {redirect: router.currentRoute.fullPath}
});
}
}
return Promise.reject(error.response.data);
}
);
第四步 既然重新封装了axios,那么使用方法当然会有一些变化,下面举例说明使用方法。如果要在example.vue中使用该插件,那么example.vue文件中应该这样写:
import {request} from '/utils/httpAxios.js';
request({ method: 'post', url: '', data: {}
}). then(function (response) {
//处理成功的请求
}). catch(function (error) {
sonsole.log(error);
});
那么,http拦截器就完工了,可以愉快地使用了~
再啰嗦一句 第一次写文章,希望能与大家分享技术踩过的坑,走过的路,也希望能和大家多多交流,共同进步。
推荐阅读
- Docker应用:容器间通信与Mariadb数据库主从复制
- vue-cli|vue-cli 3.x vue.config.js 配置
- 人生感悟记#环境仪器宋庆国成长记#072
- 2020-04-07vue中Axios的封装和API接口的管理
- 标签、语法规范、内联框架、超链接、CSS的编写位置、CSS语法、开发工具、块和内联、常用选择器、后代元素选择器、伪类、伪元素。
- 视频转换器哪种好用()
- NeuVector 会是下一个爆款云原生安全神器吗()
- 操作系统|[译]从内部了解现代浏览器(1)
- 探索免费开源服务器tomcat的魅力
- 机器学习|机器学习 Andrew Ng《Machine Learning》课程笔记1