I have a SPA(single page application), and it sends a lot of http requests to a server and the server checks whether the user who is sending the request is authenticated or not.

If the user is not authenticated, I redirect him to a login page like this:

$scope.getGroups = function () {
    $http({
        method: "get",
        url: "/enterprises/groups"
    }).success(function (response) {
        GroupService.updateGroups(response.groups);
    }).error(function (errResponse, status) {
        if(status == 403){
            $location.path("login")
        }
    });
};

The problem is that I have a lot of http requests and I don't want to handle the "forbidden" exception every time.

Is there any way to write this kind of code in, let's say, config and apply it everywhere?

I have a SPA(single page application), and it sends a lot of http requests to a server and the server checks whether the user who is sending the request is authenticated or not.

If the user is not authenticated, I redirect him to a login page like this:

$scope.getGroups = function () {
    $http({
        method: "get",
        url: "/enterprises/groups"
    }).success(function (response) {
        GroupService.updateGroups(response.groups);
    }).error(function (errResponse, status) {
        if(status == 403){
            $location.path("login")
        }
    });
};

The problem is that I have a lot of http requests and I don't want to handle the "forbidden" exception every time.

Is there any way to write this kind of code in, let's say, config and apply it everywhere?

• javascript
• angularjs

2 Answers 2

You can create a service to handle this and add it to the $http interceptors. As service like below:

app.factory('authInterceptorService', ['$q','$location', function ($q, $location){
    var responseError = function (rejection) {
        if (rejection.status === 403) {
            $location.path('login');
        }
        return $q.reject(rejection);
    };

    return {
        responseError: responseError
    };
}]);

Then add this to the in config

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

This would then be applied to all requests made.

I came across needing to the same in my own app very recently and ended up using an interceptor on the $httpProvider. This sort of thing:

angular.module('notesApp', [])
  .controller('MainCtrl', ['$http', function($http) {
    ...

  }]).factory('MyLoggingInterceptor', ['$q', function($q) {
    return {
      request: function(config) {
        console.log('Request made with ', config);
        return config;
        // If an error, or not allowed, or my custom condition
        // return $q.reject('Not allowed');
      },
      requestError: function(rejection) {
        console.log('Request error due to ', rejection);
        // Continue to ensure that the next promise chain
        // sees an error
        return $q.reject(rejection);
        // Or handled successfully?
        // return someValue;
      },
      response: function(response) {
        console.log('Response from server', response);
        // Return a promise
        return response || $q.when(response);
      },
      responseError: function(rejection) {
        console.log('Error in response ', rejection);
        // Continue to ensure that the next promise chain
        // sees an error
        // Can check auth status code here if need to
        // if (rejection.status === 403) {
        //   Show a login dialog
        //   return a value to tell controllers it has
        // been handled
        // }
        // Or return a rejection to continue the
        // promise failure chain
        return $q.reject(rejection);
      }
    };
  }])
  .config(['$httpProvider', function($httpProvider) {
    $httpProvider.interceptors.push('MyLoggingInterceptor');
  }]);