Lo que estoy tratando de lograr

Me gustaría hacer la transición a un determinado estado (inicio de sesión) en caso de que una solicitud $ http devuelva un error 401. Por lo tanto, he creado un interceptor $ http.

El problema

Cuando intento insertar '$ state' en el interceptor, obtengo una dependencia circular. ¿Por qué y cómo lo soluciono?

Código

//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);

La solución

Utilice el $injectorservicio para obtener una referencia al $stateservicio.

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);

La causa

angular-ui-router inyecta el $httpservicio como una dependencia en la $TemplateFactoryque luego crea una referencia circular $httpdentro de $httpProvidersí mismo al enviar el interceptor.

Se lanzaría la misma excepción de dependencia circular si intenta inyectar el $httpservicio directamente en un interceptor como ese.

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

Separación de intereses

Las excepciones de dependencia circular pueden indicar que hay una combinación de preocupaciones dentro de su aplicación que podrían causar problemas de estabilidad. Si se encuentra con esta excepción, debe tomarse el tiempo para observar su arquitectura para asegurarse de evitar cualquier dependencia que termine haciendo referencia a sí misma.

La respuesta de @Stephen Friedrich

Estoy de acuerdo con la respuesta a continuación de que usar el $injectorpara obtener directamente una referencia al servicio deseado no es ideal y podría considerarse un patrón anti.

Emitir un evento es una solución mucho más elegante y además desacoplada.

La pregunta es un duplicado de AngularJS: inyectar servicio en un interceptor HTTP (dependencia circular)

Estoy volviendo a publicar mi respuesta de ese hilo aquí:

Una mejor solución

Creo que usar el inyector $ directamente es un antipatrón.

Una forma de romper la dependencia circular es usar un evento: en lugar de inyectar $ state, inyecte $ rootScope. En lugar de redirigir directamente, haz

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

más

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

De esa forma ha separado las preocupaciones:

1. Detecta una respuesta 401
2. Redirigir para iniciar sesión

La solución de Jonathan fue excelente hasta que intenté guardar el estado actual. En ui-router v0.2.10, el estado actual no parece estar poblado en la carga de página inicial en el interceptor.

De todos modos, lo resolví usando el evento $ stateChangeError en su lugar. El evento $ stateChangeError le da tanto hacia como desde estados, así como el error. Es bastante ingenioso.

$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");
        }
    });