Vue|Vue 后台管理项目9-axios拦截器 Vue后台管理项目9-axios拦截器

axios拦截器:统一设置请求前和响应后的操作 【Vue|Vue 后台管理项目9-axios拦截器】传送门https://github.com/axios/axios
1.拦截器的作用:简化开发

//官方文档 // Add a request interceptor axios.interceptors.request.use(function (config) { // Do something before request is sent return config; }, function (error) { // Do something with request error return Promise.reject(error); }); // Add a response interceptor axios.interceptors.response.use(function (response) { // Do something with response data return response; }, function (error) { // Do something with response error return Promise.reject(error); });

2.统一设置请求权限必须的token信息

//在vue-axios.js中设置axios拦截器// 请求拦截器:请求发送之前,触发回调函数,将所有信息拦截存储在config axios.interceptors.request.use((config)=> { // console.log(config); //判断请求的是登录还是其他的地址 if(config.url.indexOf('/login')!=-1){ //登录接口,不做token信息添加 }else{ //非登录接口,为了一些权限接口,做token信息添加 config.headers.Authorization = window.sessionStorage.getItem('token'); } //返回处理过的axios设置 return config; }, function (error) { //出错啦 console.log(error); return Promise.reject(error); });

3.统一设置了响应的状态提示

//在vue-axios.js中设置axios拦截器//响应拦截器:请求响应回来之后,会触发这个回调函数 axios.interceptors.response.use(function (response) { // console.log(response); //根据响应的状态码,统一设置用户提示 if(response.data.meta.status===200){ //成功,提示返回的信息 Vue.prototype.$message.success(response.data.meta.msg); }else if(response.data.meta.status===400){ //失败,提示返回的信息 Vue.prototype.$message.error(response.data.meta.msg); } return response; }, function (error) { return Promise.reject(error); });

本文同步发表在我的个人博客：https://www.lubaojun.com/