Jak zapisać bieżący kontekst użytkownika w Angular?

Question

Mam usługę AuthService, która loguje użytkownika, zwraca obiekt json użytkownika. Chcę tylko ustawić ten obiekt i odzwierciedlić wszystkie zmiany w aplikacji (stan zalogowania/wylogowania) bez konieczności odświeżania strony.

Jak to zrobić z AngularJS?

Answer 1

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 ze swoich kontrolerów. Poniższy kod obserwuje zmiany wartości z usługi (przez wywołanie określonej funkcji), 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(); 
    }); 
}); 

Oczywiście, możesz użyć tych informacji, ale uznasz to za stosowne; na przykład w dyrektywach, szablonach itp. Możesz powtórzyć to (dostosowane do tego, co musisz zrobić) w kontrolerach menu, itp. Wszystko zostanie zaktualizowane automatycznie po zmianie stanu usługi.

Coś bardziej konkretnego zależy od implementacji.

Mam nadzieję, że to pomoże!

Answer 2

Chciałbym zmienić dobrą odpowiedź Josh, dodając, że ponieważ usługa AuthService jest zwykle interesująca dla każdego (powiedzmy, każdy, ale widok logowania powinien zniknąć, jeśli nikt nie jest zalogowany), może prostszą alternatywą byłoby powiadomienie zainteresowanych strony używające $rootScope.$broadcast('loginStatusChanged', isLoggedIn); (1) (2), podczas gdy zainteresowane strony (takie jak kontrolery) będą nasłuchiwać przy użyciu $scope.$on('loginStatusChanged', function (event, isLoggedIn) { $scope.isLoggedIn = isLoggedIn; }.

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

(2) Należy zauważyć, że w prawdopodobnym przypadku asynchronicznego procesu logowania, będziemy chcieli, aby powiadomić kątowa, że ​​transmisja będzie zmienić ten stan rzeczy, przez włączenie go w funkcję $rootScope.$apply().

Teraz, mówiąc o utrzymywaniu kontekstu użytkownika w każdym/wielu kontrolerach, możesz nie być usatysfakcjonowany, słuchając zmian logowania w każdym z nich, i wolisz słuchać tylko w najwyższym kontrolerze logowania, a następnie dodawać inne świadome logowanie kontrolery jako dzieci/wbudowane kontrolery tego. W ten sposób kontroler podrzędny będzie mógł zobaczyć odziedziczone właściwości rodzica $ scope, takie jak kontekst użytkownika.