Angular http interceptors configuration

Question

I am building a project in ionic and I need to send jwt tokens with each request. I am a total angular newbie and I wonder where I need to place the logic for http interceptors. Where should I do that, should I put that inside config part, make a new service or something else?

This is the interceptor logic I need to insert:

$httpProvider.interceptors.push(['$q', '$location', '$localStorage', function ($q, $location, $localStorage) {
   return {
       'request': function (config) {
           config.headers = config.headers || {};
           if ($localStorage.token) {
               config.headers.Authorization = 'Bearer ' + $localStorage.token;
           }
           return config;
       },
       'responseError': function (response) {
           if (response.status === 401 || response.status === 403) {
               $location.path('/signin');
           }
           return $q.reject(response);
       }
   };
}]);

This is the config part in my app.js:

.config(function($stateProvider, $urlRouterProvider, $authProvider, ApiEndpoint) {

  $authProvider.loginUrl = ApiEndpoint.url + '/authenticate';

  $stateProvider
  .state('main', {
    url: '/main',
    abstract: true,
    templateUrl: 'templates/main.html'
  })

  .state('main.auth', {
    url: '/auth',
    views: {
      'content': {
        templateUrl: 'templates/login.html',
        controller: 'AuthController'
      }
    }
  })

  .state('main.front', {
    url: '/front',
    views: {
      'content': {
        templateUrl: 'templates/main-front.html',
        controller: 'FrontPageController'
      }
    }
  })

  .state('main.article', {
    url: '/article/{id}',
    views: {
      'content': {
        templateUrl: 'templates/main-article.html',
        controller: 'ArticleController'
      }
    }
  });

  // if none of the above states are matched, use this as the fallback
  $urlRouterProvider.otherwise('/main/front');
});

I have added it to services.js like this, I wonder if this is the right approach?

Updated code

services.js

angular.module('coop.services', [])

.factory('ArticleService', function($http, ApiEndpoint) {

  return {
    all: function() {
       return $http.get(ApiEndpoint.url + "/articles/latest").then(function(response){
             articles = response.data;
             return articles;
          });
       },
    get: function(id) {
      return this.all().then(function(response) {
        var articles = response;
        for (var i in articles) {
          if (articles[i].id == id) {
            return articles[i];
          }
        }
        return {};
      })
    }
  };
})

.factory('AuthenticationInterceptor', function RequestInterceptor($q, $location, $localStorage, $rootScope, CoreConfig) {
    var service = this;

    service.request = function (config) {
      config.headers = config.headers || {};
         if ($localStorage.token) {
             config.headers.Authorization = 'Bearer ' + $localStorage.token;
         }
         return config;
     };

    service.responseError = function (response) {
      if (response.status === 401 || response.status === 403) {
             $location.path('/signin');
         }
         return $q.reject(response);
    };

    return service;
});

.config part in app.js:

.config(function($stateProvider, $urlRouterProvider, $authProvider, ApiEndpoint, $httpProvider) {

  $httpProvider.interceptors.push('AuthenticationInterceptor');
  $authProvider.loginUrl = ApiEndpoint.url + '/authenticate';

  $stateProvider
  .state('main', {
    url: '/main',
    abstract: true,
    templateUrl: 'templates/main.html'
  })

  .state('main.auth', {
    url: '/auth',
    views: {
      'content': {
        templateUrl: 'templates/login.html',
        controller: 'AuthController'
      }
    }
  })

  .state('main.front', {
    url: '/front',
    views: {
      'content': {
        templateUrl: 'templates/main-front.html',
        controller: 'FrontPageController'
      }
    }
  })

  .state('main.article', {
    url: '/article/{id}',
    views: {
      'content': {
        templateUrl: 'templates/main-article.html',
        controller: 'ArticleController'
      }
    }
  });

  // if none of the above states are matched, use this as the fallback
  $urlRouterProvider.otherwise('/main/front');
});

Answer 1

The Interceptors are usually configured at the bootstrapping phase.
I tend to handle it under the app config:

appName.config(["$httpProvider", ($httpProvider: ng.IHttpProvider) => {
                $httpProvider.interceptors.push(() => {

               // Your interceptor's logic here

           });
       });

Answer 2

"An interceptor is simply a factory() service that returns an object with 4 properties that map to functions". So write your interceptor as a normal service with which methods you need overide (request, response, requestError, responseError).

In code example below, I just care to request and respondError property so I just return a service with two propertis. You can also made many interceptors to handle each kind of these property. Many interceptors can be applied to only one property (some kind of interceptor: authentication, handle error, restore request, pre-process response/request data...).

app.factory('AuthenticationInterceptor', function RequestInterceptor($rootScope, CoreConfig) {
    var service = this;

    service.request = function (config) {
        if (angular.isDefined(CoreConfig.TokenKeyString) && angular.isDefined(CoreConfig.SessionKeyString)) {
            config.headers['Authorization-Token'] = CoreConfig.TokenKeyString;
            config.headers.SessionKeyString = CoreConfig.SessionKeyString;
        }
        return config;
    };

    service.responseError = function (response) {
        return response;
    };

    return service;
});

then push your interceptor at config phase:

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