欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

vue 请求和响应拦截器

程序员文章站 2022-07-02 23:15:50
// 接口根路径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 => { // 对...
// 接口根路径
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

相关标签: WEB前端开发