Điều tôi đang cố gắng đạt được

Tôi muốn chuyển sang một trạng thái nhất định (đăng nhập) trong trường hợp yêu cầu $ http trả về lỗi 401. Do đó, tôi đã tạo một trình chặn $ http.

Vấn đề

Khi tôi cố gắng chèn '$ state' vào bộ đánh chặn, tôi nhận được sự phụ thuộc vòng tròn. Tại sao và làm thế nào để tôi sửa chữa nó?

Mã

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

Khắc phục

Sử dụng $injectordịch vụ để tham khảo $statedịch vụ.

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

Nguyên nhân

angle-ui-router đưa $httpdịch vụ vào như một phần phụ thuộc vào $TemplateFactoryđó, sau đó tạo ra một tham chiếu $httpvòng trong $httpProviderchính nó khi điều động bộ đánh chặn.

Ngoại lệ phụ thuộc vòng tương tự sẽ được ném ra nếu bạn cố gắng đưa $httpdịch vụ trực tiếp vào một bộ đánh chặn như vậy.

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

Tách các mối quan tâm

Các ngoại lệ phụ thuộc vòng tròn có thể chỉ ra rằng có sự pha trộn các mối quan tâm trong ứng dụng của bạn có thể gây ra các vấn đề về tính ổn định. Nếu bạn thấy mình có ngoại lệ này, bạn nên dành thời gian để xem xét kiến ​​trúc của mình để đảm bảo bạn tránh bất kỳ sự phụ thuộc nào mà cuối cùng lại tham chiếu đến chính chúng.

Câu trả lời của @Stephen Friedrich

Tôi đồng ý với câu trả lời bên dưới rằng việc sử dụng $injectorđể nhận trực tiếp tham chiếu đến dịch vụ mong muốn là không lý tưởng và có thể được coi là một hình thức phản đối.

Phát một sự kiện là một giải pháp tách biệt và thanh lịch hơn nhiều.

Câu hỏi là một bản sao của AngularJS: Đưa dịch vụ vào bộ đánh chặn HTTP (Phụ thuộc vòng)

Tôi đăng lại câu trả lời của mình từ chủ đề đó ở đây:

Một bản sửa lỗi tốt hơn

Tôi nghĩ rằng sử dụng trực tiếp bộ phun $ là một phản vật chất.

Một cách để phá vỡ sự phụ thuộc vòng tròn là sử dụng một sự kiện: Thay vì tiêm $ state, hãy tiêm $ rootScope. Thay vì chuyển hướng trực tiếp, hãy làm

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

thêm

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

Bằng cách đó, bạn đã tách các mối quan tâm:

1. Phát hiện phản hồi 401
2. Chuyển hướng để đăng nhập

Giải pháp của Jonathan rất tuyệt vời cho đến khi tôi cố gắng cứu trạng thái hiện tại. Trong ui-router v0.2.10 , trạng thái hiện tại dường như không được điền khi tải trang ban đầu trong bộ chặn.

Dù sao, tôi đã giải quyết nó bằng cách sử dụng sự kiện $ stateChangeError để thay thế. Sự kiện $ stateChangeError cung cấp cho bạn cả trạng thái đến và đi , cũng như lỗi. Nó khá tiện lợi.

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