Interceptor for all http requests in angularJS 1.0.x

Question

I am currently working in a angular app in whcih I wanted to write an interceptor for all http request from my app which in turns calls a service to know whether the single sign on session is still active or not, if it is not active I should route to my single sign on and then serves the user request to load the next page or results. I am not sure how to write a interceptor in AngularJS and not sure how to save the user request when I redirect my page to Single sign on.

I am currently using angularjs 1.0.2 , I see that there are responseInterceptors in 1.0.2 documentation, but not requestInterceptors . . Is there a work around to write request Interceptors for http calls in Angular 1.0.2

Answer 1

There is a good example in the official documentation working for the current stable 1.2.0.

[http://docs.angularjs.org/api/ng.$http][1] (top quarter of the page, search for Interceptors)

angular.module('RequestInterceptor', [])
  .config(function ($httpProvider) {
    $httpProvider.interceptors.push('requestInterceptor');
  })
  .factory('requestInterceptor', function ($q, $rootScope) {
    $rootScope.pendingRequests = 0;
    return {
           'request': function (config) {
                $rootScope.pendingRequests++;
                return config || $q.when(config);
            },

            'requestError': function(rejection) {
                $rootScope.pendingRequests--;
                return $q.reject(rejection);
            },

            'response': function(response) {
                $rootScope.pendingRequests--;
                return response || $q.when(response);
            },

            'responseError': function(rejection) {
                $rootScope.pendingRequests--;
                return $q.reject(rejection);
            }
        }
    });

Instead of counting the pendingRequests, you can store the current time, lets say as lastRequestTimestamp. If you combine this with a globally running timer, you can detect how long ago the last request was.

Answer 2

You can use interceptor very easily

Here is a sample

var mydevices = angular.module('deviceDetails', ['ui.bootstrap', 'tags-input'])

mydevices.config(function ($httpProvider) {
$httpProvider.interceptors.push(function($q) {
      return {
       'request': function(config) {
           if (config.method === 'GET' && config.url.contains("/rest/")) {
               var sep = config.url.indexOf('?') === -1 ? '?' : '&';
               config.url = config.url + sep + 'cacheSlayer=' + new Date().getTime();
           }
           console.log(config.url);
           return config || $q.when(config);
        }
      };
    });
});

The example above modifies the URL for all /rest/ URLs

Hope this helps