Tengo un AuthService, que inicia sesión en un usuario, devuelve un objeto json de usuario. Lo que quiero hacer es configurar ese objeto y que todos los cambios se reflejen en la aplicación (estado de inicio / cierre de sesión) sin tener que actualizar la página.
¿Cómo podría lograr esto con AngularJS?
Respuestas:
La forma más sencilla de lograrlo es mediante un servicio. Por ejemplo:
app.factory( 'AuthService', function() {
var currentUser;
return {
login: function() { ... },
logout: function() { ... },
isLoggedIn: function() { ... },
currentUser: function() { return currentUser; }
...
};
});A continuación, puede hacer referencia a esto en cualquiera de sus controladores. El siguiente código busca cambios en un valor del servicio (llamando a la función especificada) y luego sincroniza los valores modificados con el alcance.
app.controller( 'MainCtrl', function( $scope, AuthService ) {
$scope.$watch( AuthService.isLoggedIn, function ( isLoggedIn ) {
$scope.isLoggedIn = isLoggedIn;
$scope.currentUser = AuthService.currentUser();
});
});Y luego, por supuesto, puede usar esa información como mejor le parezca; por ejemplo, en directivas, en plantillas, etc. Puede repetir esto (personalizado según lo que necesite hacer) en sus controladores de menú, etc. Todo se actualizará automáticamente cuando cambie el estado del servicio.
Cualquier cosa más específica depende de su implementación.
¡Espero que esto ayude!
AuthService. Esto ayuda no solo para las actualizaciones de la página, sino también para alguien que abre un enlace en una nueva pestaña.
ui-router) y las resoluciones de ruta son una buena manera de mantener los controles de autenticación SECOS. Lo que escribiste suena bien.
Enmendaría la buena respuesta de Josh agregando que, dado que un AuthService suele interesar a cualquiera (digamos, cualquiera que no sea la vista de inicio de sesión debería desaparecer si nadie está registrado), tal vez una alternativa más sencilla sería notificar a las partes interesadas mediante $rootScope.$broadcast('loginStatusChanged', isLoggedIn);(1 ) (2), mientras que las partes interesadas (como los controladores) escucharían utilizando $scope.$on('loginStatusChanged', function (event, isLoggedIn) { $scope.isLoggedIn = isLoggedIn; }.
(1) $rootScopesiendo inyectado como argumento del servicio
(2) Tenga en cuenta que, en el caso probable de una operación de inicio de sesión asincrónica, querrá notificar a Angular que la transmisión cambiará las cosas, incluyéndola en una $rootScope.$apply()función.
Ahora, hablando de mantener el contexto del usuario en todos / muchos controladores, es posible que no esté contento de escuchar los cambios de inicio de sesión en todos ellos, y es posible que prefiera escuchar solo en un controlador de inicio de sesión superior y luego agregar otros controladores con reconocimiento de inicio de sesión como niños / controladores integrados de este. De esta manera, el controlador secundario podrá ver las propiedades $ scope heredadas del padre, como su contexto de usuario.