当前位置： 移动技术网 > IT编程>脚本编程>vue.js > vue 请求和响应拦截器

vue 请求和响应拦截器

2020年07月24日  | 移动技术网IT编程  | 我要评论 
// 接口根路径
let baseURL = 'http://192.168.0.0:4000/fzpt-api'
// 请求拦截器
axios.interceptors.request.use(config => {
  // 在发送请求之前做些什么
  if (Store.state.token) {
    config.headers['Authorization'] = Store.state.token
  }
  return config
}, error => {
  // 对请求错误做些什么
  return Promise.reject(error)
})

// 响应拦截器
axios.interceptors.response.use(response => {
  // 对响应数据做些什么
  return response
}, error => {
  // 当响应异常时
  let isTimeout = error.toString().includes('timeout')
  if (isTimeout) {
    Vue.prototype.$message({
      message: '请求超时...',
      type: 'warning',
      duration: 2000,
      showClose: true
    })
  }
  let isLogTimeout = error.toString().includes('401')
  if (isLogTimeout) {
    // 登录超时, 跳转至登录界面
    Vue.prototype.$message({
      message: '登录过期，请重新登录',
      type: 'warning',
      duration: 2000,
      showClose: true
    })
    // 重置登录状态
    // Store.commit('updateLoginStatus', false)
    // Router.push({
    //   name: 'Login'
    // })
  }
  return Promise.reject(error)
})

也可以参考学习以下博客
https://blog.csdn.net/diao1057/article/details/98787013
https://www.jianshu.com/p/cb1cf9549ef6
https://segmentfault.com/a/1190000016110704?utm_source=tag-newest

本文地址：https://blog.csdn.net/qyl_0316/article/details/107516226

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网