vue登录过期重定向和请求拦截器

以下代码可以放在同一个js文件里面

登录过期重定向

// http response 响应拦截器 登录过期重定向
axios.interceptors.response.use(response => {
  switch (response.data.code) {
    case 104:
      alert('登录已经过期,请重新登录')
      setTimeout(function () {
        router.replace({
          path: '/Login'
          // 登录成功后跳入浏览的当前页面
          // query: {redirect: router.currentRoute.fullPath}
        })
      }, 1500)
      break
    case 102:
      alert('登录已经过期,请重新登录')
      setTimeout(function () {
        router.replace({
          path: '/Login'
          // 登录成功后跳入浏览的当前页面
          // query: {redirect: router.currentRoute.fullPath}
        })
      }, 1500)
      break
  }
  return response
}, error => {
  if (error.response) {
    // 返回接口返回的错误信息
    return Promise.reject(error.response.data)
  }
})

请求拦截器

//请求拦截器,捕捉到post请求的话,就解析config的data,不清楚的打印出来看一下就知道了
axios.interceptors.request.use(
  config => {
    if (config.method === 'post') {
      // config.data = qs.stringify(config.data)
      console.log(config)
    }
    return config
  },
  error => {
    console.log(error)
    Promise.reject(error)
  }
)

顺便说下请求封装

// get封装       headers里面可以根据需要设置请求头里面的数据
export function getAjax (url, params = {}) {
  return new Promise((resolve, reject) => {
      axios.get(url, {
        params: params,
        headers: {
          'USERNAME': userInfo.SIP_NO,
          'AUTH-TOKEN': userInfo.TOKEN,
          'TIMESTAMP': Math.round(new Date() / 1000)
        }
      })
        .then(response => {
          resolve(response.data)
        })
        .catch(err => {
          reject(err)
        })
  })
}
//使用的话只需要在使用的页面引入这个js文件,比如 
//import {getAjax} from './assets/common/REQUEST'


//getAjax(url,data).then(res =>{})


// post封装
export function postAjax (url, data = {}) {
  return new Promise((resolve, reject) => {
      axios.post(url, data, {
        headers: {
          'USERNAME': userInfo.SIP_NO,
          'AUTH-TOKEN': userInfo.TOKEN,
          'TIMESTAMP': Math.round(new Date() / 1000)
        }
      })
        .then(response => {
          resolve(response.data)
        }, err => {
          reject(err)
        })
  })
}
//使用的话只需要在使用的页面引入这个js文件,比如 
//import {postAjax} from './assets/common/REQUEST'


//postAjax(url,data).then(res =>{})

delete的封装和put直接参照这个例子写一下就OK了,试试动手别顾着看

你可能感兴趣的:(前端,vue)