Skip to content Skip to sidebar Skip to footer

Vue.js Interceptor

How can I use a interceptor in vue.js? So before every request/response it should first go to the interceptor. I already searched a lot but can't find a good documentation about th

Solution 1:

example for global config:

Vue.http.interceptors.push({

  request: function(request){
    request.headers['Authorization'] = auth.getAuthHeader()
    return request
  },

  response: function(response) {
    //console.log('status: ' + response.data)
    return response;
  }

});

request is for outcoming traffic and response if for incoming messages

local config in vue component is also possible.

EDIT - since sytax have changed now it should look like this:

Vue.http.interceptors.push((request, next)  => {
  request.headers['Authorization'] = auth.getAuthHeader()
  next((response) => {
    if(response.status == 401 ) {
      auth.logout();
      router.go('/login?unauthorized=1');
    }
  });
});

Solution 2:

Vue itself has no AJAX functionality. Are you talking about the plugin vue-resource, or do you use some other library for requests?

vue-resource supports has intereceptors: https://github.com/vuejs/vue-resource/blob/master/docs/http.md (scroll down to the last section)

Post a Comment for "Vue.js Interceptor"