javascript - Vuejs http 拦截器失败

Question

我正在尝试设置 vuejs http 拦截器，但它们不起作用。

Vue.use(VueResource)
Vue.http.options.root = 'http://127.0.0.1:8000/api' //this works

Vue.http.interceptors.push({
  request: (request) => {
    console.log("we have a request")
    return request
  },
  response: (response) => {
    console.log('we got a response', response)
    return response
  },
  error: (err) => {
    console.log('error is', err)
  }
})

现在在我的组件中

this.$http.get('user/profile/')

拦截器不会console.log

我哪里出错了？

Answer 1

您没有正确配置拦截器，您应该推送一个带有 2 个参数 request 和 next 的函数。

Vue.use(VueResource)
Vue.http.options.root = 'http://127.0.0.1:8000/api' //this works

Vue.http.interceptors.push(function (request, next) {
  console.log(request)
  request.headers.set('Authorization', 'Bearer ' + sessionStorage.getItem('token'))
  next()
})

Vue.http.interceptors.push(function (request, next) {
  next(function (response) {
    console.log(response)
    if (response.status === 401) {
      // handle error or logout
      return response
    }
  })
})