vue 无法进入response拦截器_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) { <