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 у кутових документах, здається, показує спосіб отримати залежності, що вводиться "регулярним шляхом" у 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');

Куди повинен піти вищезазначений код?

Я здогадуюсь, моє запитання - який правильний шлях зробити це?

Дякую, і я сподіваюся, що моє запитання було досить зрозумілим.

У вас кругла залежність між $ http та вашим AuthService.

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

Я вважаю, що те, що ви зробили, - це насправді найпростіший спосіб зробити це.

Ви також можете це зробити:

• Реєстрація перехоплювача пізніше (зробити це в run()блоці замість config()блоку, можливо, вже зробить свою справу). Але чи можете ви гарантувати, що $ http вже не дзвонили?
• "Впорскування" $ http вручну в AuthService, коли ви реєструєте перехоплювач, зателефонувавши AuthService.setHttp()чи щось.
• ...

Це я і закінчила

  .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.

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

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

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

плюс

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

Погана логіка дала такі результати

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

У вашому випадку програма Angular надішле запит у будь-якому випадку, ви просто перевіряєте авторизацію там, а після цього JavaScript надішле запит.

Основа вашої проблеми

myHttpInterceptorназивається $httpProviderпримірником. Ваші AuthServiceвикористання $http, або $resource, і тут у вас є рекурсія залежності або кругова залежність. Якщо ви усунете цю залежність від AuthService, ви не побачите цієї помилки.

Крім того, як @Pieter Herroelen вказував, ви можете розмістити цей перехоплювач у своєму модулі module.run, але це буде більше схоже на хак, а не на рішення.

Якщо ви готові робити чистий і самоописний код, ви повинні дотримуватися деяких принципів SOLID.

Принаймні принцип єдиної відповідальності дуже допоможе вам у таких ситуаціях.

Якщо ви просто перевіряєте стан 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;
      }
    }
  })
}])

Автоматичний модуль:

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, наприклад)