J'ai un AuthService, qui connecte un utilisateur, il renvoie un objet json utilisateur. Ce que je veux faire, c'est définir cet objet et faire refléter toutes les modifications dans l'application (état connecté / déconnecté) sans avoir à actualiser la page.
Comment pourrais-je accomplir cela avec AngularJS?
Réponses:
Le moyen le plus simple d'y parvenir est d'utiliser un service. Par exemple:
app.factory( 'AuthService', function() {
var currentUser;
return {
login: function() { ... },
logout: function() { ... },
isLoggedIn: function() { ... },
currentUser: function() { return currentUser; }
...
};
});Vous pouvez ensuite le référencer dans n'importe lequel de vos contrôleurs. Le code suivant surveille les modifications d'une valeur du service (en appelant la fonction spécifiée), puis synchronise les valeurs modifiées avec l'étendue.
app.controller( 'MainCtrl', function( $scope, AuthService ) {
$scope.$watch( AuthService.isLoggedIn, function ( isLoggedIn ) {
$scope.isLoggedIn = isLoggedIn;
$scope.currentUser = AuthService.currentUser();
});
});Et puis, bien sûr, vous pouvez utiliser ces informations comme bon vous semble; par exemple dans les directives, dans les modèles, etc. Vous pouvez répéter ceci (personnalisé selon ce que vous devez faire) dans vos contrôleurs de menu, etc. Tout sera mis à jour automatiquement lorsque vous changez l'état du service.
Tout ce qui est plus spécifique dépend de votre implémentation.
J'espère que cela t'aides!
AuthService. Cela aide non seulement pour les actualisations de page, mais aussi pour quelqu'un qui ouvre un lien dans un nouvel onglet.
ui-router) et les routes résolues sont un bon moyen de garder les contrôles d'authentification DRY. Ce que vous avez écrit semble juste.
Je modifierais la bonne réponse de Josh en ajoutant que, comme un AuthService est généralement d'intérêt pour n'importe qui (disons, n'importe qui mais la vue de connexion devrait disparaître si personne n'est connecté), peut-être qu'une alternative plus simple serait d'informer les parties intéressées en utilisant $rootScope.$broadcast('loginStatusChanged', isLoggedIn);(1 ) (2), tandis que les parties intéressées (comme les contrôleurs) écouteraient en utilisant $scope.$on('loginStatusChanged', function (event, isLoggedIn) { $scope.isLoggedIn = isLoggedIn; }.
(1) $rootScopeétant injecté comme argument du service
(2) Notez que, dans le cas probable d'une opération de connexion asynchrone, vous voudrez informer Angular que la diffusion changera les choses, en l'incluant dans une $rootScope.$apply()fonction.
Maintenant, en parlant de garder le contexte utilisateur dans tous / de nombreux contrôleurs, vous pourriez ne pas être heureux d'écouter les changements de connexion dans chacun d'entre eux, et préférer peut-être écouter uniquement dans un contrôleur de connexion le plus élevé, puis ajouter d'autres contrôleurs prenant en charge la connexion en tant qu'enfants / contrôleurs embarqués de celui-ci. De cette façon, le contrôleur enfants pourra voir les propriétés héritées du parent $ scope telles que votre contexte utilisateur.