AngularJS: услуга инжекции в HTTP-перехватчик (круговая зависимость)

Я пытаюсь написать HTTP-перехватчик для моего приложения AngularJS для проверки подлинности.

Этот код работает, но я беспокоюсь о том, чтобы вручную вводить услугу, поскольку я думал, что Angular должен обрабатывать это автоматически:

    app.config(['$httpProvider', function ($httpProvider) {
    $httpProvider.interceptors.push(function ($location, $injector) {
        return {
            'request': function (config) {
                //injected manually to get around circular dependency problem.
                var AuthService = $injector.get('AuthService');
                console.log(AuthService);
                console.log('in request interceptor');
                if (!AuthService.isAuthenticated() && $location.path != '/login') {
                    console.log('user is not logged in.');
                    $location.path('/login');
                }
                return config;
            }
        };
    })
}]);

Что я начал делать, но столкнулся с проблемами циклической зависимости:

    app.config(function ($provide, $httpProvider) {
    $provide.factory('HttpInterceptor', function ($q, $location, AuthService) {
        return {
            'request': function (config) {
                console.log('in request interceptor.');
                if (!AuthService.isAuthenticated() && $location.path != '/login') {
                    console.log('user is not logged in.');
                    $location.path('/login');
                }
                return config;
            }
        };
    });

    $httpProvider.interceptors.push('HttpInterceptor');
});

Еще одна причина, по которой я беспокоюсь, заключается в том, что раздел на странице $http в Angular Docs, похоже, показывает способ получения зависимостей, вводимых "обычным способом" "в перехватчик Http. См. Их фрагмент кода в разделе" Перехватчики":

// register the interceptor as a service
$provide.factory('myHttpInterceptor', function($q, dependency1, dependency2) {
  return {
    // optional method
    'request': function(config) {
      // do something on success
      return config || $q.when(config);
    },

    // optional method
   'requestError': function(rejection) {
      // do something on error
      if (canRecover(rejection)) {
        return responseOrNewPromise
      }
      return $q.reject(rejection);
    },



    // optional method
    'response': function(response) {
      // do something on success
      return response || $q.when(response);
    },

    // optional method
   'responseError': function(rejection) {
      // do something on error
      if (canRecover(rejection)) {
        return responseOrNewPromise
      }
      return $q.reject(rejection);
    };
  }
});

$httpProvider.interceptors.push('myHttpInterceptor');

Где должен стоять вышеуказанный код?

Думаю, мой вопрос в том, как правильно это сделать?

Спасибо, и я надеюсь, что мой вопрос был достаточно ясным.

ОТВЕТЫ

Ответ 1

У вас есть циклическая зависимость между $http и вашим AuthService.

То, что вы делаете с помощью службы $injector, - это решение проблемы курица и яйцо, задерживая зависимость $http от AuthService.

Я считаю, что то, что вы сделали, на самом деле является самым простым способом сделать это.

Вы также можете сделать это:

  • Регистрация перехватчика позже (выполнение этого в блоке run() вместо блока config() может уже сделать трюк). Но можете ли вы гарантировать, что $http уже не был вызван?
  • "Инъекция" $http вручную в AuthService, когда вы регистрируете перехватчик, вызывая AuthService.setHttp() или что-то в этом роде.
  • ...

Ответ 2

Это то, что я закончил делать

  .config(['$httpProvider', function ($httpProvider) {
        //enable cors
        $httpProvider.defaults.useXDomain = true;

        $httpProvider.interceptors.push(['$location', '$injector', '$q', function ($location, $injector, $q) {
            return {
                'request': function (config) {

                    //injected manually to get around circular dependency problem.
                    var AuthService = $injector.get('Auth');

                    if (!AuthService.isAuthenticated()) {
                        $location.path('/login');
                    } else {
                        //add session_id as a bearer token in header of all outgoing HTTP requests.
                        var currentUser = AuthService.getCurrentUser();
                        if (currentUser !== null) {
                            var sessionId = AuthService.getCurrentUser().sessionId;
                            if (sessionId) {
                                config.headers.Authorization = 'Bearer ' + sessionId;
                            }
                        }
                    }

                    //add headers
                    return config;
                },
                'responseError': function (rejection) {
                    if (rejection.status === 401) {

                        //injected manually to get around circular dependency problem.
                        var AuthService = $injector.get('Auth');

                        //if server returns 401 despite user being authenticated on app side, it means session timed out on server
                        if (AuthService.isAuthenticated()) {
                            AuthService.appLogOut();
                        }
                        $location.path('/login');
                        return $q.reject(rejection);
                    }
                }
            };
        }]);
    }]);

Примечание. Вызовы $injector.get должны быть в пределах методов перехватчика, если вы попытаетесь использовать их в другом месте, вы продолжите получать круговую ошибку зависимостей в JS.

Ответ 3

Я думаю, что использование инжектора $напрямую является антипатерном.

Способ разбить круговую зависимость - использовать событие: Вместо того, чтобы вводить $state, введите $rootScope. Вместо прямого перенаправления do

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

плюс

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

Ответ 4

Плохая логика сделала такие результаты

На самом деле нет смысла искать, автор авторизован или нет в Http Interceptor. Я бы рекомендовал обернуть все ваши HTTP-запросы в один .service(или .factory или в .provider) и использовать его для ВСЕХ запросов. Каждый раз, когда вы вызываете функцию, вы можете проверить, зарегистрирован ли пользователь или нет. Если все в порядке, разрешите отправку запроса.

В вашем случае приложение Angular отправит запрос в любом случае, вы просто проверите авторизацию там, и после этого JavaScript отправит запрос.

Ядро вашей проблемы

myHttpInterceptor вызывается в $httpProvider экземпляре. Ваш AuthService использует $http или $resource, и здесь вы имеете рекурсию зависимости или круговую зависимость. Если вы удалите эту зависимость из AuthService, вы не увидите эту ошибку.

Также, как указал @Pieter Herroelen, вы можете разместить этот перехватчик в своем модуле module.run, но это будет больше похоже на взлом, а не на решение.

Если вы делаете чистый и самоописательный код, вы должны пойти с некоторыми принципами SOLID.

По крайней мере, принцип одиночной ответственности поможет вам в таких ситуациях.

Ответ 5

Если вы просто проверяете состояние Auth (isAuthorized()), я бы порекомендовал поставить это состояние в отдельный модуль, скажем, "Auth", который просто удерживает состояние и не использует самого $http.

app.config(['$httpProvider', function ($httpProvider) {
  $httpProvider.interceptors.push(function ($location, Auth) {
    return {
      'request': function (config) {
        if (!Auth.isAuthenticated() && $location.path != '/login') {
          console.log('user is not logged in.');
          $location.path('/login');
        }
        return config;
      }
    }
  })
}])

Модуль Auth:

angular
  .module('app')
  .factory('Auth', Auth)

function Auth() {
  var $scope = {}
  $scope.sessionId = localStorage.getItem('sessionId')
  $scope.authorized = $scope.sessionId !== null
  //... other auth relevant data

  $scope.isAuthorized = function() {
    return $scope.authorized
  }

  return $scope
}

(я использовал localStorage для хранения sessionId на стороне клиента здесь, но вы также можете установить это в свой AuthService после вызова $http, например)