Comment stocker un contexte utilisateur actuel dans AngularJS ?

Question

J'ai un AuthService, qui se connecte à un utilisateur, il renvoie un objet json utilisateur. Ce que je veux faire, c'est définir cet objet et faire en sorte que tous les changements soient reflétés dans l'application (état de connexion et de déconnexion) sans avoir à rafraîchir la page.

Comment pourrais-je accomplir cela avec AngularJS ?

Answer 1

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 y faire référence dans n'importe lequel de vos contrôleurs. Le code suivant surveille les changements dans une valeur du service (en appelant la fonction spécifiée) et synchronise ensuite les valeurs modifiées avec la portée.

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

Ensuite, bien sûr, vous pouvez utiliser ces informations comme bon vous semble, par exemple dans des directives, des modèles, etc. Vous pouvez répéter cela (en fonction de vos besoins) dans vos contrôleurs de menu, etc. Tout cela sera mis à jour automatiquement lorsque vous modifierez l'état du service.

Tout ce qui est plus spécifique dépend de votre mise en œuvre.

J'espère que cela vous aidera !

Answer 2

Je modifierais la bonne réponse de Josh en ajoutant que, comme un AuthService intéresse généralement tout le monde (disons, tout le monde mais la vue de connexion devrait disparaître si personne n'est connecté), peut-être qu'une alternative plus simple serait de notifier les parties intéressées en utilisant $rootScope.$broadcast('loginStatusChanged', isLoggedIn); (1) (2), tandis que les parties intéressées (telles que les contrôleurs) écouteraient en utilisant les éléments suivants $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 notifier à Angular que la diffusion changera les choses, en l'incluant dans un fichier de type $rootScope.$apply() fonction.

En ce qui concerne la conservation du contexte utilisateur dans plusieurs contrôleurs, il se peut que vous ne soyez pas heureux d'écouter les changements de login dans chacun d'entre eux, et que vous préfériez n'écouter que le contrôleur de login le plus haut, puis ajouter d'autres contrôleurs conscients du login en tant que contrôleurs enfants/embedded de celui-ci. De cette façon, le contrôleur enfant sera capable de voir les propriétés $scope héritées du parent, comme votre contexte utilisateur.