AngularJS中的循環依賴

Question

我一直在嘗試從interceptorService（文件：authenticationServices.js）中調用UserService.openLogin（）函數，但沒有成功。

一切正常，但是當我嘗試將UserService作為依賴項注入時，在攔截器服務中，AngularJS返回以下錯誤：

“未捕獲的錯誤：[$ injector：cdep]找到循環依賴項：$ http <-UserService <-攔截器服務<-$ http <-$ templateRequest <-$ compile”。

拜托，有人可以幫我嗎？

文件：authenticationModule.js

angular
.module('app.authentication', [
    'app.authentication.controllers',
    'app.authentication.services',
    'app.authentication.directives']
)

.config(['$routeProvider', function ($routeProvider) {
    $routeProvider
        .when('/register', {
            templateUrl: 'app/modules/authentication/authenticationViews/authenticationUserCreate.html',
            controller: 'authenticationController as loginCtrl',
            css: 'app/modules/authentication/authenticationViews/css/authenticationStyles.css',
        })
        .when('/edit', {
            templateUrl: 'app/modules/authentication/authenticationViews/authenticationProfileEdit.html',
            controller: 'authenticationController as loginCtrl',
            css: 'app/modules/authentication/authenticationViews/css/authenticationStyles.css',
        })
}])

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

文件：authenticationControllers.js

angular.module('app.authentication.controllers', [])

.controller('authenticationController', ['UserService', '$location', '$uibModalInstance',
    function (UserService, $location, $uibModalInstance) {
        var self = this;

        self.user = {
            username: '',
            password: ''
        };

        self.login = function () {
            UserService.login(self.user).then(
                function (success) {
                    if (success.status == '400') {
                        window.alert(success.data.error_description);
                    }
                    else {
                        $location.path('/jobs');
                        $uibModalInstance.close();
                    }
                },
                function (error) {
                    UserService.logout();
                    window.alert(error.message)
                })
        };

        self.closeLogin = function () {
            $uibModalInstance.dismiss();
        }

        self.logout = function () {
            UserService.logout();
        };
    }])

文件：authenticationServices.js

angular.module('app.authentication.services', [])

.factory('StorageService', [function () {
    return {
        isAuth: false,
        userData: {
            userName: "",
            token: ""
        },
    }
}])

.factory('UserService', ['$http', '$uibModal', 'StorageService', function ($http, $uibModal, StorageService) {
    return {
        login: function (user) {
            var data = "grant_type=password&username=" + user.userName + "&password=" + user.password;
            var serviceBase = "http://localhost:53944/";

            return $http.post(serviceBase + 'token', data, { headers: { 'Content-Type': 'application/x-www-form-urlencoded' } })
                .then(function (response) {

                    if (response.data.access_token) {
                        StorageService.isAuth = true;
                        StorageService.userData.token = response.data.access_token;
                    }
                    return response;
                });
        },
        openLogin: function () {
            $uibModal.open({
                animation: true,
                templateUrl: 'app/modules/authentication/authenticationViews/authenticationLogin.html',
                controller: 'authenticationController',
                controllerAs: 'loginCtrl',
                size: 'md'
            })
        },
        logout: function () {
            StorageService.userData.token = "";
            StorageService.userData.userName = "";
            StorageService.isAuth = false;
        }
    };
}])

.factory('interceptorService', ['StorageService', 'UserService', function (StorageService, UserService) {

    return {

        request: function (config) {
            var userData = StorageService.userData;
            if (userData.token) {
                config.headers = config.headers || {};
                config.headers.Authorization = 'Bearer ' + userData.token;
            }
            return config;
        },
        responseError: function (rejection) {

            debugger;
            switch (rejection.status) {
                case 401:
                    UserService.openLogin();
                    //window.alert("Erro: " + rejection.status);
                    break;
                case 400:
                    window.alert("Erro: " + rejection.status + "Descrição: " + rejection.data.error_description);
                    break;
                default:
                    window.alert("Erro: " + rejection.status);

            }

            return rejection;
        }
    }
}])

Answer 1

我找到了一種注入UserService而不循環依賴錯誤的方法。 但是我不知道是否正確。 有人知道嗎

看一下臨時解決方案：

    .factory('interceptorService', ['StorageService', '$injector', function (StorageService, $injector) {

    return {

        request: function (config) {
            var userData = StorageService.userData;
            if (userData.token) {
                config.headers = config.headers || {};
                config.headers.Authorization = 'Bearer ' + userData.token;
            }
            return config;
        },
        responseError: function (rejection) {

            debugger;
            switch (rejection.status) {
                case 401:
                    $injector.get('UserService').openLogin();
                    break;
                case 400:
                    window.alert("Erro: " + rejection.status + "Descrição: " + rejection.data.error_description);
                    break;
                default:
                    window.alert("Erro: " + rejection.status);

            }

            return rejection;
        }
    }
}])