vue-cli(五) axios拦截器

使用axios拦截器对所有http请求和响应做统一处理,使用场景例如： 1、http请求：header添加token 2、http响应：根据错误码进行错误处理

import axios from 'axios'
/**
 * http请求配置及拦截
**/
let authToken = localStorage.getItem('authToken')
if (process.env.NODE_ENV !== 'production') {
  axios.defaults.headers.post['authToken'] = 'AaEnUu4Yu0lmFdR/4sAxEyQH7HeV5/WhXwN1jd3DXAJS3rFUPLxvpltJ5vRcQF/A'
}
// request 拦截器
axios.interceptors.request.use(config => {
  // 在发送请求之前做些什么
  if (authToken) {
    config.headers.authToken = authToken
  }
  return config
}, error => {
  // 对请求错误做些什么
  Promise.reject(error)
})
// response 拦截器
axios.interceptors.response.use(response => {
  // 对响应数据做点什么
  const res = response.data
  if (res.status) {
    return response
  } else {
    if (res.msg === 'authToken无效') {
      if (process.env.NODE_ENV === 'production') {
        router.replace('/Author')
      }
    } else {
      alert(res.msg)
    }
    return response
  }
}, error => {
  // 对响应错误做点什么
  return Promise.reject(error)
})

NPLUSWEB / nplusweb.github.io

vue-cli(五) axios拦截器 #23