Interceptores HTTP Con Angularjs

adrianalonso.es

web developer

angularjs  framework  js  http  interceptor  javascript

¿Como funciona el servicio http de Angular?

• Servicio nativo del framework que permite conectarnos a apis
• $http en el core se puede injectar en los constructores
• AJAX O JSONP
• Verbos Tradicionales
• Promise API

Ejemplo Request

$http.get('/url').
  success(function(data, status, headers, config) {
    // callback de éxito
  }).
  error(function(data, status, headers, config) {
     // callback de error
  });

¿Que es un Interceptor ?

• Middle ware se interpone entre request y responses
• Se utiliza por ejemplo para validar autenticacion
• DRY Pattern
• Capaz de interceptar estas peticiones antes de que sean manejadas por el servidor adaptándolas a tus necesidades.
• Pre/Post Procesado de las responses y request

Ejemplo Auth

var config = {headers:  {
        'Authorization': 'Basic d2VudHsvcnRobgFuOkNoYW5nZV9tZQ==',
        'Accept': 'application/json;odata=verbose',
        "X-Testing" : "testing"
    }
};

$http.get("/test", config);

Configuración del Servicio

Para implementar un interceptor http en angularjs se necesita registrar una factoría la cual se inyectará en la configuración del servicio $httpProvider.  Este interceptor nos permite suscribirnos a los siguientes eventos:

• request:  este evento nos devuelve la configuración del objeto http permitiéndonos modificarla o crear una nuevo.
• requestError:  este evento es llamado justo antes de lanzar un error en la petición
• response: este evento nos permite modificar el objeto respuesta recibido en una petición.
• responseError: este evento es llamado justo antes de lanzar un error de respuesta

Ejemplo Config

// Definición de la factoría
$provide.factory('myHttpInterceptor', function($q, dependency1, dependency2) {
  return {
    // optional method
    'request': function(config) {
      // do something on success
      return config;
    },
    // optional method
   'requestError': function(rejection) {
      // do something on error
      if (canRecover(rejection)) {
        return responseOrNewPromise
      }
      return $q.reject(rejection);
    },
    // optional method
    'response': function(response) {
      // do something on success
      return response;
    },
    // optional method
   'responseError': function(rejection) {
      // do something on error
      if (canRecover(rejection)) {
        return responseOrNewPromise
      }
      return $q.reject(rejection);
    }
  };
});

// configuracion del interceptor
$httpProvider.interceptors.push('myHttpInterceptor');

Implementación Real

return {

      request: function (config) {

        if(config.url.indexOf("/api/") !== -1)){
           
            isLogged=$localStorage.get('logged');
            if(isLogged){
                 user=$localStorage.getObject('user');
                 config.headers['Authorization'] = 'Basic ' + user.encode;
            }else{
                $location.path('/login');
            }
       }

        return config || $q.when(config);
      },

     responseError: function(response) {
        // Unauthorized
        if(response.status==401){
          $location.path('/login');
        }

        return $q.reject(response);
      }
    };
  }

GRACIAS

http://adrianalonso.es/2015/01/interceptores-http-para-angularjs/