Чого я намагаюся досягти

Я хотів би перейти до певного стану (логін), якщо запит $ http поверне помилку 401. Тому я створив перехоплювач $ http.

Проблема

Коли я намагаюся вставити "перешкоду $" у перехоплювач, я отримую кругову залежність. Чому і як це можна виправити?

Код

//Inside Config function

    var interceptor = ['$location', '$q', '$state', function($location, $q, $state) {
        function success(response) {
            return response;
        }

        function error(response) {

            if(response.status === 401) {
                $state.transitionTo('public.login');
                return $q.reject(response);
            }
            else {
                return $q.reject(response);
            }
        }

        return function(promise) {
            return promise.then(success, error);
        }
    }];

    $httpProvider.responseInterceptors.push(interceptor);

Виправлення

Скористайтеся $injectorпослугою, щоб отримати посилання на $stateслужбу.

var interceptor = ['$location', '$q', '$injector', function($location, $q, $injector) {
    function success(response) {
        return response;
    }

    function error(response) {

        if(response.status === 401) {
            $injector.get('$state').transitionTo('public.login');
            return $q.reject(response);
        }
        else {
            return $q.reject(response);
        }
    }

    return function(promise) {
        return promise.then(success, error);
    }
}];

$httpProvider.responseInterceptors.push(interceptor);

Причина

angular-ui-router вводить $httpпослугу як залежність, в $TemplateFactoryякій потім створює циркулярну посилання $httpвсередині $httpProviderсебе при відправці перехоплювача.

Це ж виняток із циркулярної залежності буде кинуто, якщо ви спробуєте ввести $httpпослугу безпосередньо в перехоплювач.

var interceptor = ['$location', '$q', '$http', function($location, $q, $http) {

Розмежування проблем

Винятки з кругової залежності можуть вказувати на те, що у вашій програмі є проблематика, що може спричинити проблеми зі стабільністю. Якщо ви опинитесь за цим винятком, вам слід витратити час на розгляд архітектури, щоб уникнути будь-яких залежностей, які в кінцевому підсумку посилаються на себе.

Відповідь @ Стефана Фрідріха

Я погоджуюся з нижченаведеною відповіддю, що використання $injectorпрямого посилання на потрібну послугу не є ідеальним і може вважатися анти-схемою.

Емітувати подію - це набагато більш елегантне рішення, а також роз'єднане.

Питання - це дублікат AngularJS: Ін'єкція послуги в перехоплювач HTTP (кругова залежність)

Я повторно публікую свою відповідь з цієї теми тут:

Краще виправлення

Я думаю, що використання безпосередньо інжектора $ є антипатерном.

Спосіб розірвати кругову залежність - використовувати подію: Замість того, щоб вводити $ state, введіть $ rootScope. Замість того, щоб переспрямовувати безпосередньо, зробіть

this.$rootScope.$emit("unauthorized");

плюс

angular
    .module('foo')
    .run(function($rootScope, $state) {
        $rootScope.$on('unauthorized', () => {
            $state.transitionTo('login');
        });
    });

Таким чином ви розділили проблеми:

1. Виявити відповідь 401
2. Перенаправлення на вхід

Рішення Джонатана було чудовим, поки я не намагався врятувати поточний стан. У ui-маршрутизаторі v0.2.10 поточний стан не здається заповненим при початковому завантаженні сторінки в перехоплювачі.

У всякому разі, я вирішив це, використовуючи натомість події $ stateChangeError . $ StateChangeError подія дає вам як до і від держав, а також помилок. Це досить вишукано.

$rootScope.$on('$stateChangeError',
    function(event, toState, toParams, fromState, fromParams, error){
        console.log('stateChangeError');
        console.log(toState, toParams, fromState, fromParams, error);

        if(error.status == 401){
            console.log("401 detected. Redirecting...");

            authService.deniedState = toState.name;
            $state.go("login");
        }
    });