angularjs - interceptores - interceptor angular 1

¿Cómo utilizar el interceptor angularJS para interceptar solo solicitudes http específicas?

Question

Sé cómo interceptar TODAS las solicitudes, pero solo quiero interceptar solicitudes de mis recursos.

¿Alguien sabe como hacer esto?

services.config([''$httpProvider'',function($httpProvider) {
    $httpProvider.interceptors.push(''myHttpInterceptor'');
}]);

services.factory("userPurchased", function ($resource) {
    return $resource("/api/user/purchases/:action/:item", 
        {}, 
        {
            ''list'': {method: ''GET'', params: {action: ''list''}, isArray: false},
            ''save'': {method: ''PUT'', params: {item: ''@item''}},
            ''remove'': {method: ''DELETE'', params: {item: ''@item''}},
        }
    );
});

services.factory(''myHttpInterceptor'', function($q,$rootScope) {
    // $rootScope.showSpinner = false;
    return {

      response: function(response) {
        $rootScope.showSpinner = false;
        // do something on success
        console.log(''success'');
        console.log(''status'', response.status);
        //return response;
        return response || $q.when(response);
      },

     responseError: function(response) {
        // do something on error
        $rootScope.showSpinner = true;
        console.log(''failure'');
        console.log(''status'', response.status)
        //return response;
        return $q.reject(response);
      }
    };
  });

Answer 1

Acabo de encontrar un problema en el que Googleapis también usa un encabezado de Authorization , y estaba lanzando una respuesta 401 porque el JWT que uso en mi servidor no era válido para su servidor (obviamente), y mi código estaba configurado para eliminar automáticamente mi token y redirigir a la persona a la página de inicio de sesión. (No se escribió muy bien, ya que CUALQUIER respuesta 401 cerraría la sesión de mi usuario).

Acabo de encontrar esta solución en mi método de request en el interceptor, que creo que funciona bastante bien:

.service(''authInterceptor'', ["$q", "$location", "tokenService", function($q, $location, tokenService){
    this.request = function(config) {
//        console.log($location.host());
        var token = tokenService.getToken();
        if(token && config.url.indexOf($location.host()) > -1) {
            config.headers = config.headers || {};
            config.headers.Authorization = "Bearer " + token
        }
        return config
    }

    this.responseError = function(response) {
//        console.log(response.config.url)
        if (response.status === 401) {
            tokenService.removeToken();
            $location.path(''/login'')
        }
        return $q.reject(response);
    }
}])

El método de request comprueba si tengo un token en el almacenamiento local Y si la url de la solicitud se está realizando en el mismo host (que recibo de $location.host() ) en la que se está publicando mi página. Esto funciona tanto para localhost como para cualquier URL en la que termine de implementar mi sitio.

No he hecho muchas pruebas con esto, así que si alguien encuentra una falla en esto, hágamelo saber :)

Answer 2

La única forma que conozco de hacer esto es simplemente filtrar las solicitudes que desea en el controlador de respuestas.

p.ej

...
response: function(response) {
    if(response.config.url.startsWith(''/api/'')) {
        //Do your custom processing here
    }

    return response;
}
...

Polyfill para string.startsWith ()

//Taken from http://.com/questions/646628/javascript-startswith
if (typeof(String.prototype.startsWith) === ''undefined'') {
    String.prototype.startsWith = function(str) {
        return this.slice(0, str.length) === str;
    };
}

Answer 3

Mi forma preferida es usar un interceptor HTTP que reemplaza un encabezado de autorización "mágico" con el token de OAuth actual. El código a continuación es específico de OAuth, pero remediarlo es un ejercicio simple para el lector.

// Injects an HTTP interceptor that replaces a "Bearer" authorization header
// with the current Bearer token.
module.factory(''oauthHttpInterceptor'', function (OAuth) {
  return {
    request: function (config) {
      if (config.headers.Authorization === ''Bearer'') {
        config.headers.Authorization = ''Bearer '' + btoa(OAuth.accessToken);
      }
      return config;
    }
  };
});

module.config(function ($httpProvider) {
  $httpProvider.interceptors.push(''oauthHttpInterceptor'');
});

Answer 4

Por defecto, angular envía y recibe encabezados de aplicación / json. Puede obtener esto en el encabezado de respuesta HTTP como:

services.config([''$httpProvider'',function($httpProvider) {
    $httpProvider.interceptors.push(''myHttpInterceptor'');
}]);

services.factory("userPurchased", function ($resource) {
    return $resource("/api/user/purchases/:action/:item", 
        {}, 
        {
            ''list'': {method: ''GET'', params: {action: ''list''}, isArray: false},
            ''save'': {method: ''PUT'', params: {item: ''@item''}},
            ''remove'': {method: ''DELETE'', params: {item: ''@item''}},
        }
    );
});

services.factory(''myHttpInterceptor'', function($q,$rootScope) {
    // $rootScope.showSpinner = false;
    return {

      response: function(response) {
        // use this line to if you are receiving json, else use xml or any other type
        var isJson = response.config.headers.Accept.indexOf(''json'')>-1;
        $rootScope.showSpinner = false;
        // do something on success
        console.log(''success'');
        console.log(''status'', response.status);
        //return response;
        return response || $q.when(response);
      },

     responseError: function(response) {
        // use this line to if you are receiving json, else use xml or any other type
        var isJson = response.config.headers.Accept.indexOf(''json'')>-1;
        // do something on error
        $rootScope.showSpinner = true;
        console.log(''failure'');
        console.log(''status'', response.status)
        //return response;
        return $q.reject(response);
      }
    };
  });

Answer 5

Si desea interceptar solo solicitudes de recursos específicos, puede usar la propiedad de interceptor opcional de $request acción de $request . La documentación de Angular ver aquí (Uso> acciones)

JavaScript

angular.module(''app'', [''ngResource'']).
  factory(''resourceInterceptor'', function() {
    return {
      response: function(response) {
        console.log(''response intercepted: '', response);
      }
    }
  }).
  factory(''resourceService'', [''$resource'', ''resourceInterceptor'', function($resource, resourceInterceptor) {
    return $resource(":name", 
        {}, 
        {
            ''list'': {method: ''GET'', isArray: false, interceptor: resourceInterceptor}
        }
    );
  }]).
  run([''resourceService'', ''$http'', function(resourceService, $http) {
    resourceService.list({name: ''list.json''}); // <= intercepted
    $http.get(''list.json''); // <= not intercepted
  }]);

Plunker: http://plnkr.co/edit/xjJH1rdJyB6vvpDACJOT?p=preview

Answer 6

/**object single interceptor**/ 
 function SingleCallInterceptor(callbacks){

    this.receive=function(response) {

      switch (response.status) {

        case 200:

          callbacks.success(apiResponse);

          break;

        default :

          callbacks.error(response);
      }

    }

  }


var successfn=function(response){  //i have my response}

var errorfn=function(response){  //i have my error}

var responseInterceptor=new SingleCallInterceptor({success:successfn,error:errorfn});

        $http({

        url: "www.itsdirtysolutioniknow.it,

        method: "GET",

        dataType: "JSONP",

      }).then(responseInterceptor.receive,responseInterceptor.receive);