Jak zapisać aktualny kontekst użytkownika w AngularJS?

Mam AuthService, który loguje się do użytkownika, zwraca obiekt user json. Chcę ustawić ten obiekt i mieć wszystkie zmiany odzwierciedlone w aplikacji (Stan zalogowany/wylogowany) bez konieczności odświeżania strony.

Jak to osiągnąć z AngularJS?

 90
angularjs
Author: Mazzy, 2013-01-08
Source

2 answers

Najprostszym sposobem na osiągnięcie tego celu jest skorzystanie z usługi. Na przykład: 

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

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

Możesz odwołać się do tego w dowolnym kontrolerze. Poniższy kod obserwuje zmiany wartości z usługi (wywołując określoną funkcję), a następnie synchronizuje zmienione wartości z zakresem.

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

I wtedy, oczywiście, możesz użyć tych informacji, jak uważasz za stosowne; np. w dyrektywach, szablonach itp. Możesz powtórzyć to (dostosowane do tego, co musisz zrobić) w swoim Kontrolery menu itp. Wszystko to zostanie zaktualizowane automatycznie po zmianie stanu w usłudze.

Wszystko bardziej szczegółowe zależy od twojej implementacji. Mam nadzieję, że to pomoże!
 179
Author: Josh David Miller,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-01-08 00:52:52

Poprawiłbym dobrą odpowiedź Josha dodając, że ponieważ AuthService jest zazwyczaj interesujący każdego (powiedzmy, każdy, ale widok logowania powinien zniknąć, jeśli nikt nie jest zalogowany), może prostszą alternatywą byłoby powiadomienie zainteresowanych za pomocą $rootScope.$broadcast('loginStatusChanged', isLoggedIn); (1) (2), podczas gdy zainteresowane strony (takie jak kontrolery) słuchały za pomocą $scope.$on('loginStatusChanged', function (event, isLoggedIn) { $scope.isLoggedIn = isLoggedIn; }.

(1) $rootScope jest wstrzykiwany jako argument Usługi

(2) zauważ, że w prawdopodobnym przypadku operacji logowania asynchronicznego, będziesz chciał powiadomić Angular, że transmisja zmieni rzeczy, włączając ją do funkcji $rootScope.$apply().

Teraz, mówiąc o zachowaniu kontekstu użytkownika w każdym / wielu kontrolerach, możesz nie być zadowolony ze słuchania zmian logowania w każdym z nich, i może wolisz słuchać tylko w najwyższym kontrolerze logowania, a następnie dodając inne kontrolery świadome logowania jako Dzieci / wbudowane Kontrolery tego. W ten sposób kontroler dzieci będzie mógł zobaczyć dziedziczonego rodzica $scope właściwości, takie jak kontekst użytkownika.

 5
Author: Javarome,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-05-23 13:35:35