写了很多的vue项目，经常碰到需要做请求拦截的情况，从发请求前的token判断到对返回信息的响应，我自己在不同的阶段是用不同的方式处理的。

入门阶段

记得当时做的第一个项目，是需要在请求头部加入登录是获取到的token，每个接口都需要，因此就有了下面的代码：

每次请求前，拿到token，再封装到头部信息中，再传递给后台。

公共方法

后来，需求升级了，在请求前需要判断token是否存在，是否过期；在后台返回结果后，需要根据不同的返回状态的给出不同的提示。当时，项目基本上都已经写完了，几十个接口，每个接口请求前后都要添加一个方法，感觉超级麻烦额，为了偷懒，我竟然神奇的想到了使用全局方法。

先在main.js中定义两个全局然后在每个请求前后分别调用这两个全局方法，我真的是每个请求都有加：

请求拦截

大概是半年后吧，自我感觉能比较熟练的使用vue做项目了，才想起来认真看一下官方文档，这个才发现了有请求拦截这么好用的东东。。。

一直都是用的axios，之前都是直接在main.js中引入

现在要做请求拦截，所以先在新建一个http.js文件，然后在http.js中引入axios然后暴露出去，再到main.js中引入http.js：

http.js

main.js

再回到http.js中，因为我这里用到了一些其他的东西，比如后台地址变量sessiondate.add、本地存储的token，所以在前面还引入了一些其他的东西

现在开始写请求前的拦截：判断是否有token，如果有，将token存入请求头部：

这样，在后面每次请求的时候，不用再获取token什么的了。

接下来就是写对返回结果的响应了：

一次性处理多种情况，简单省事。

上面的方式是token存储在cookie里面，但是也有很多时候，token是存在vuex里面的，然后在vuex里面再讲token存在本地：

存储

在http.js中使用