Comment stocker un contexte utilisateur actuel dans AngularJS?

J’ai un AuthService, qui se connecte à un utilisateur, renvoie un object json utilisateur. Ce que je veux faire, c’est définir cet object et faire en sorte que toutes les modifications soient reflétées dans l’application (état connecté / déconnecté) sans avoir à actualiser la page.

Comment pourrais-je accomplir cela avec AngularJS?

La manière la 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 faire référence à ceci dans n’importe lequel de vos contrôleurs. Le code suivant surveille les modifications apscopes à une valeur à partir 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é à ce que vous devez faire) dans vos contrôleurs de menu, etc. Tout sera mis à jour automatiquement lorsque vous modifiez l’état du service.

Tout ce qui est plus spécifique dépend de votre implémentation.

J’espère que cela t’aides!

Je voudrais modifier la bonne réponse de Josh en ajoutant que, comme AuthService est généralement intéressant pour tout le monde (par exemple, tout utilisateur sauf la vue de connexion devrait disparaître si personne n’est connecté), une alternative plus simple consisterait à avertir les parties intéressées à l’aide de $rootScope.$broadcast('loginStatusChanged', isLoggedIn); (1) (2), tandis que les parties intéressées (telles que les contrôleurs) écoutent en utilisant $scope.$on('loginStatusChanged', function (event, isLoggedIn) { $scope.isLoggedIn = isLoggedIn; } .

(1) $rootScope injecté comme argument du service

(2) Notez que dans le cas probable d’une opération de connexion asynchrone, vous voudrez notifier à Angular que la diffusion changera des choses, en l’incluant dans une fonction $rootScope.$apply() .

Maintenant, en parlant de garder le contexte utilisateur dans tous les contrôleurs, vous pourriez ne pas être à l’écoute des changements de connexion dans chacun d’entre eux et préférer n’écouter que dans un contrôleur de connexion le plus élevé, puis append d’autres contrôleurs contrôleurs embarqués de celui-ci. De cette façon, le contrôleur enfants pourra voir les propriétés parent $ scope héritées, telles que votre contexte utilisateur.