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

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/