Circular dependency found: Http Response Interceptor 401

Question

The basic idea was to use an Http Response Interceptor to redirect my webpage if it gives an 401 status. But i don't know if i am doing this the right way: i thought it was something like this but i seems more difficult than it seems. At the moment i get an Circular dependency found.

Do i need to push the interceptor somewhere else? And how can the interceptor know if i get an 401 request. is it also possible to define which 401 needs to be intercept and which ones ignored

   (function () {
        'use strict';

        angular
            .module('app', ['ngRoute','ngCookies','ngMessages'])
            .config(routeConfig);

        routeConfig.$inject = ['$routeProvider','$httpProvider'];


        function routeConfig($routeProvider,$httpProvider) {
            $routeProvider

                .when('/', {

                    templateUrl: 'login.html',
                    controller : 'LoginController'
                })
                .when('/register', {

                    templateUrl: 'register.html',
                    controller : 'RegisterController'
                })
                .when('/main', {
                  //This gives an 401 status when the user has not been logged in
                    templateUrl: 'home.html',
                    controller : 'HomeController'

                })

                .otherwise('/');


            // We need to add this for csrf protection
            $httpProvider.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

            //this gives an Circular dependency error
            $httpProvider.interceptors.push('HttpResponseInterceptor');

        }

    })();

This is my service:

(function () {
    'use strict';

    angular
        .module('app')
        .factory('HttpResponseInterceptor', HttpResponseInterceptor);

    HttpResponseInterceptor.$inject = ['$rootScope','$http','$q','$location'];
    function HttpResponseInterceptor($rootScope,$http,$q,$location) {

        return {
            response: function(response){
                if (response.status === 401) {

                }
                return response || $q.when(response);
            },
            responseError: function(rejection) {
                if (rejection.status === 401) {

                    $location.path('/login');
                }
                return $q.reject(rejection);
            }
        };

    }

})();

Update2

As mention in the comment i was injecting to much stuff. So this is one problem fixed, but now when i go to the login page it makes a request on loading the page (localhost:8080/user) which results in an infinite loop of redirection to the login page and with a browser crash as result.

So is there a way i can say to the Interceptor which url's needed to be redirected and which ones don't

Answer 1

This is answer to 2nd problem ...

You query the rejection object and add some further conditions to your IF statement ...

you can dump rejection object with ...

console.log(JSON.stringify(rejection));

then add conditions to your IF ...

if (rejection.status === 401 && rejection.config.url !== "/url/you/do/not/want/to/change/state/on") {

    // do state.go or something else here

 }