Як зберегти поточний контекст користувача в AngularJS?

Question 1

У мене є AuthService, яка реєструє користувача, він повертає користувацький json-об'єкт. Що я хочу зробити, це встановити цей об’єкт, і всі зміни відображатимуться у програмі (вхід / вихід із системи) без необхідності оновлювати сторінку.

Як би я досяг цього за допомогою AngularJS?

Question 2

Найпростіший спосіб досягти цього - скористатися послугою. Наприклад:

app.factory( 'AuthService', function() {
  var currentUser;

  return {
    login: function() { ... },
    logout: function() { ... },
    isLoggedIn: function() { ... },
    currentUser: function() { return currentUser; }
    ...
  };
});

Потім ви можете посилатися на це в будь-якому з ваших контролерів. Наступний код стежить за змінами у значенні служби (викликаючи вказану функцію), а потім синхронізує змінені значення до області.

app.controller( 'MainCtrl', function( $scope, AuthService ) {
  $scope.$watch( AuthService.isLoggedIn, function ( isLoggedIn ) {
    $scope.isLoggedIn = isLoggedIn;
    $scope.currentUser = AuthService.currentUser();
  });
});

І тоді, звичайно, ви можете використовувати цю інформацію, як би не вважали за потрібне; наприклад, у директивах, у шаблонах тощо. Ви можете повторити це (з урахуванням того, що вам потрібно зробити) у своїх контролерах меню тощо. Все це буде оновлено автоматично, коли ви зміните стан служби.

Щось більш конкретне залежить від вашої реалізації.

Сподіваюся, це допомагає!

Question 3

Я хотів би змінити добру реакцію Джоша, додавши, що, оскільки AuthService, як правило, цікавить когось (скажімо, будь-хто, крім подання для входу, повинен зникнути, якщо ніхто не входить в систему), можливо, більш простою альтернативою було б сповіщення зацікавлених сторін за допомогою $rootScope.$broadcast('loginStatusChanged', isLoggedIn);(1 ) (2), тоді як зацікавлені сторони (наприклад, контролери) будуть слухати, використовуючи $scope.$on('loginStatusChanged', function (event, isLoggedIn) { $scope.isLoggedIn = isLoggedIn; }.

(1) $rootScopeвводиться як аргумент послуги

(2) Зверніть увагу, що у вірогідному випадку асинхронної операції входу в систему ви хочете повідомити Angular про те, що трансляція змінить ситуацію, включивши її у $rootScope.$apply()функцію.

Тепер, говорячи про збереження контексту користувача в кожному / багатьох контролерах, ви, можливо, не будете раді слухати зміни входу у всіх з них, і можете віддати перевагу прослуховуванню лише у найвищому контролері входу, а потім додаючи інші контролери, що знають про вхід, як дочірні / вбудовані контролери цього. Таким чином, дочірній контролер зможе побачити успадковані батьківські властивості $ scope, такі як ваш контекст користувача.