axios封装与api接口管理，web前端设计与开发

console.log(error) // for debug

return Promise.reject(error)

}

)

这里说一下token，一般是在登录完成之后，将用户的token通过localStorage或者cookie存在本地，然后用户每次在进入页面的时候（即在main.js中），会首先从本地存储中读取token，如果token存在说明用户已经登陆过，则更新vuex中的token状态。然后，在每次请求接口的时候，都会在请求的header中携带token，后台人员就可以根据你携带的token来判断你的登录是否过期，如果没有携带，则说明没有登录过。这时候或许有些小伙伴会有疑问了，就是每个请求都携带token，那么要是一个页面不需要用户登录就可以访问的怎么办呢？其实，你前端的请求可以携带token，但是后台可以选择不接收啊！

7. 响应的拦截

// 响应拦截器

service.interceptors.response.use(

response => {

// 如果返回的状态码为200，说明接口请求成功，可以正常拿到数据

// 否则的话抛出错误

if (response.status === 200) {

return Promise.resolve(response);

} else {

return Promise.reject(response);

}

},

// 服务器状态码不是2开头的的情况

// 这里可以跟你们的后台开发人员协商好统一的错误状态码

// 然后根据返回的状态码进行一些操作，例如登录过期提示，错误提示等等

// 下面列举几个常见的操作，其他需求可自行扩展

error => {

if (error.response.status) {

switch (error.response.status) {

// 401: 未登录

// 未登录则跳转登录页面，并携带当前页面的路径

// 在登录成功后返回当前页面，这一步需要在登录页操作。

case 401:

router.replace({

path: ‘/login’,

query: {

redirect: router.currentRoute.fullPath

}

});

break;

// 403 token过期

// 登录过期对用户进行提示

// 清除本地token和清空vuex中token对象