У меня есть AuthService, который регистрирует пользователя, он возвращает объект json пользователя. Я хочу установить этот объект и отразить все изменения в приложении (состояние входа / выхода) без необходимости обновлять страницу.
Как мне добиться этого с помощью AngularJS?
Ответы:
Самый простой способ добиться этого - использовать службу. Например:
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();
});
});
И затем, конечно, вы можете использовать эту информацию, как считаете нужным; например, в директивах, в шаблонах и т. д. Вы можете повторить это (настроенное в соответствии с тем, что вам нужно сделать) в своих контроллерах меню и т. д. Все это будет обновляться автоматически, когда вы измените состояние службы.
Что-то более конкретное зависит от вашей реализации.
Надеюсь это поможет!
AuthService. Это помогает не только обновлять страницу, но и тем, кто открывает ссылку в новой вкладке.
ui-router) и разрешения маршрутов - хороший способ сохранить управление аутентификацией в СУХОМ состоянии. То, что вы написали, звучит правильно.
Я бы изменил хороший ответ Джоша, добавив, что, поскольку AuthService обычно интересует кого угодно (скажем, любой, кроме окна входа в систему, должен исчезнуть, если никто не вошел в систему), возможно, более простой альтернативой было бы уведомить заинтересованные стороны, используя $rootScope.$broadcast('loginStatusChanged', isLoggedIn);(1 ) (2), в то время как заинтересованные стороны (например, контроллеры) будут слушать, используя $scope.$on('loginStatusChanged', function (event, isLoggedIn) { $scope.isLoggedIn = isLoggedIn; }.
(1) $rootScopeвводится как аргумент службы
(2) Обратите внимание, что в вероятном случае асинхронной операции входа в систему вы захотите уведомить Angular о том, что трансляция изменит ситуацию, включив ее в $rootScope.$apply()функцию.
Теперь, говоря о сохранении пользовательского контекста в каждом / многих контроллерах, вы, возможно, не будете довольны прослушиванием изменений входа в систему в каждом из них и, возможно, предпочтете прослушивать только в самом верхнем контроллере входа в систему, а затем добавите другие контроллеры входа в систему в качестве дочерних / встроенные контроллеры этого. Таким образом, дочерний контроллер сможет видеть унаследованные родительские свойства $ scope, такие как ваш пользовательский контекст.