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);
  }
);

第三步

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拦截器就完工了，可以愉快地使用了~

再啰嗦一句

第一次写文章，希望能与大家分享技术踩过的坑，走过的路，也希望能和大家多多交流，共同进步。