vue中封装axios，设置拦截器，刷新token

vue中封装axios，设置拦截器，刷新token

在vue中前后端交互数据，axios基本上是必需品，而使用axios的时候必然少不了封装axios，设置axios拦截器。如果你还不知道在vue中如何引入axios，请参考axios文档

设置拦截器

下载完axios好之后，在vue中新建一个axios文件夹，然后引入axios，引入成功后给请求头加上token。在这里说一下token，当用户登录成功后后端会返回两个token，一个是用户token（x-user-token），一个是刷新token（refreshtoken），将这两个token存入localstorage或者cookie，然后在这从缓存中取出token加入到请求头中。

响应拦截

响应拦截很好理解，当token失效的时候，在响应拦截中就会返回信息，这个时候我们就可以用后端给我们反的第二个刷新token来请求刷新接口，就会返回两个全新的token

刷新token

在响应拦截中调用刷新token的方法，当这个接口返回两个全新的token就再次存入到缓存中在这要注意的是，在这个axios文件中this不指向vue实例所以不能使用this.$router.push跳转页面，这个时候我们可以吧router文件引入到axios文件中直接使用$router.push跳转页面。

下篇讲述如何封装axios。
如果觉得本篇文章对您有用就留一个关注！