后台管理（四）：对axios网络请求结果的拦截处理

我们之前在处理token的时候，在axios里面进行的拦截设置，可以每次请求都在头部携带token信息，这样就不用每次请求的时候都要写一遍了。

// axios请求拦截
axios.interceptors.request.use(config => {
  config.headers.Authorization = window.sessionStorage.getItem('admin_token')
  return config
})

那么问题来了，token是有时效的，如果你有看我的后台代码，就会发现如果token时效了，我返回的code状态码是10，不是200。所以我想根据token失效，让页面跳转登录页面，可是我总不能每次请求都写一遍判断code是不是等于10吧。所以同样可以在axios进行请求结果的拦截处理。

// response interceptor
axios.interceptors.response.use(
  /**
   * If you want to get http information such as headers or status
   * Please return  response => response
  */

  /**
   * Determine the request status by custom code
   * Here is just an example
   * You can also judge the status by HTTP Status Code
   */
  response => {
    const res = response.data
    // if the custom code is 10, token valid.
    if (res.code === 10) {
      window.sessionStorage.clear()
      router.push('/login')
      return Promise.reject(new Error('koken 失效'))
    } else {
      return response
    }
  },
  error => {
    console.log('err' + error) // for debug
    this.$Message({
      message: error.message,
      type: 'error'
    })
    return Promise.reject(error)
  }
)

我建议可以打印一下response 的值，这样就可以知道可以拿到哪些数据进行判断，因为这边我的目的仅仅是判断token有没有失效，是否跳转到登录页面，所以只做了相应的操作。如果你还有其他数据要统一整合，可以自行进行处理。

git前端地址：https://gitee.com/stonezry/Vue-Admin-Demo

git接口地址：https://gitee.com/stonezry/Springboot-Admin-Demo

欢迎关注本人公众号和小程序，谢谢