javascript - validacion - ¿Cómo mantener globalmente al usuario actual hasta que cierre sesión con angular_devise?

validar formulario javascript antes de enviar

Question

¿Cómo crear un servicio propio accesible a nivel mundial que llame al servidor mediante currentUser() solo una vez en la carga de la página, si el Usuario ha iniciado sesión y luego lo mantiene y proporciona datos a los controladores o estados hasta el cierre de sesión? Ahora estoy resolviendo muchas veces en muchos estados o controladores currentUser() , encontré en documentos: authparseresponse que es posible crear un servicio propio, pero no sé cómo manejar esto de la manera correcta.

por ejemplo, en ui-router tengo dos llamadas de servidor, solo sería suficiente cuando se carga la página:

.state(''login'', {
  url: ''/login'',
  templateUrl: ''auth/_login.html'',
  controller: ''AuthCtrl'',
  onEnter: [
    ''$state'', ''Auth'',
    function($state, Auth) {
      Auth.currentUser().then(function() {
        $state.go(''home'');
      });
    }
  ]
})
.state(''dashboard'', {
  url: ''/dashboard'',
  templateUrl: ''dashboard.html'',
  onEnter: [
    ''$state'', ''Auth'',
    function($state, Auth) {
      Auth.currentUser().then(function(user) {}, function(err) {
        $state.go(''home'');// user not logged in
      });
    }
  ]
})

o cada vez que la próxima llamada del servidor en NavController:

app.controller(''NavController'', [
  ''$state'', ''$scope'', ''Auth'', function($state, $scope, Auth) {
    $scope.signedIn = Auth.isAuthenticated;
    $scope.logout = Auth.logout; // logout function
    Auth.currentUser().then(function(user) {
      $scope.user = user;
    });
    $scope.$on(''devise:login'', function(e, user) {
      $scope.user = user;
    });
    $scope.$on(''devise:logout'', function(e, user) {
      $scope.user = {};
      $state.go("home");
    });
  }
]);

Encontré una pregunta similar sin respuesta: stackoverflow

Answer 1

Como sabemos, factory es un objeto singleton y básicamente se utiliza para compartir datos. Podemos inyectarlo en cualquier controlador y funciona como una dependencia. Por lo tanto, esto también puede resolver su problema. inyecte este servicio a su bloque de resolución de estado y verifique si el usuario existe o no, si no, llame a la función de búsqueda de usuario de fábrica

app.factory("User", function($http, $q, $rootScope) {
var user = null;
return {
    fetchUser: function() {
        /*your ajax call that return current user*/
        user = YOUR_SERVER_RESPONSE;
        return user;

    },
    getUser : function(){
        return user;
    },
    setUser : function(u){
        user = u;
    }
}

});

y su bloque de configuración del estado es como

  .state(''dashboard'', {
  url: ''/dashboard'',
  templateUrl: ''dashboard.html'',
  resolve : function(User){
    if(User.getUser()){
        return User.getUser();
    }else{
        return User.fetchUser();
    }
  }
})

Answer 2

Edición: Cambiando algunas partes para el uso con el módulo angular_device

En general, estoy usando la solución que se proporciona aquí ( https://vickev.com/#!/article/authentication-in-single-page-applications-node-js-passportjs-angularjs ) que describe cómo verificar si un usuario se registra en cada llamada HTTP.

Compruebe en la carga, si el usuario ha iniciado sesión

myApp.config([''$routeProvider'',''$locationProvider'',
function($routeProvider, $locationProvider) {
//================================================
// Check if the user is connected
//================================================
var checkLoggedin = function($q, $rootScope, Auth, User){
  // Initialize a new promise
  var deferred = $q.defer();
  Auth.currentUser().then(function(userObj){
    deferred.resolve();
    //option a: just save the user object into the $rootScope
    $rootScope.User = userObj;
    //option b: create a factory ''User'' and a method ''save()'' which parses the JSON returned from your Server 
    User.save(userObj);
  }, function(error){
    deferred.reject();
  });
  return deferred.promise;
};


//================================================
// Define all the routes
//================================================
$routeProvider
  //Start page, where the user gets a list of registered SO and can add new ones
  .when(''/'', {
    templateUrl: ''templates/index.html'', 
    controller: ''indexCtrl'',
    resolve: {
      loggedin: checkLoggedin
    }
  })
  .when(''/login'', {
    templateUrl: ''templates/login.html'', 
    controller: ''loginCtrl''
  })
  // do more here
  .otherwise({
      redirectTo: ''/''
  });
}]).run(function($rootScope, $http){
//Do some initial tasks or set some values
});

Yo crearía un servicio adicional llamado "Usuario" (ya que los servicios son singletons), definiría algunos métodos, por ejemplo, guardar () y obtener (), para guardar al Usuario en el singleton de servicio y devolverlo donde sea necesario. Con la función "checkLoggedIn" puede definir una opción de "resolución" para sus rutas y, si se cumple la promesa, el usuario puede acceder a la página restringida.

Answer 3

Guarde los detalles del usuario en Global.user, use el módulo ''Global'' en los controladores o servicios.

cuando tenga que acceder al usuario, acceda utilizando Global.user

Answer 4

He tenido que lidiar con la autenticación de usuarios en una gran aplicación Angular y encontré este artículo muy útil: https://medium.com/opinionated-angularjs/techniques-for-authentication-in-angularjs-applications-7bbf0346acec

Específico a ''cómo hacer que suceda solo una vez'':

• puede llamar al init () del Servicio en un bloque app.run
• agregándolo como un requisito de resolve de un estado externo para la aplicación (si usa estados anidados)

Un Servicio de Servicio de UserService para representar el estado de UserService de sesión del usuario funciona bien para compartir el estado en toda la aplicación. Las funciones de inicio y cierre de sesión se pueden exponer a través de este servicio y los detalles del usuario también se pueden almacenar aquí. Definir un UserApi que extienda $resource probablemente también ayude a separar las preocupaciones HTTP reales de la administración del estado del usuario.

Otras inquietudes que lo atraparán, las cuales están cubiertas en el artículo: estado persistente en las actualizaciones de la página y áreas del sitio que solo son accesibles cuando el usuario está conectado.

Answer 5

Resolví el problema de la información de current_user con angular agregando el siguiente código de JavaScript (jQuery) en la parte inferior de mi página HTML principal:

$("meta[name=current_user]").data(''current_user'', {
    id: <%=j current_user.id.to_s %>, 
    username: "<%=j current_user.full_name.to_s %>"
});

Puede analizar la información que necesite, esto es un Proyecto Rails y todo lo que necesitaba era el ID y NOMBRE (con el ID que podía consultar el objeto de la fábrica del Usuario y recibir un JSON con información completa si lo necesitaba).

Luego, en su Controlador AngularJS puede agregar (el mío es coffeescript ):

# Grab User Info
current_user = angular.element("meta[name=current_user]").data ''current_user''

# Stop Here if you Have the Info you Need
$scope.user = current_user

# **** OR Get More Info if User is Logged In 
if current_user.id is not undefined
   $scope.user = User.get {id: current_user.id}

Aquí está mi código de fábrica para el usuario ( coffeescript otra vez ):

# In order to prevent minification from effecting the code
# must wrap functions as arrays and pass in the variables as 
# strings before the function call
app.factory "User", ["$resource", ($resource) ->
    $resource("/api/angular/users/:id", 
    { id: "@id" }, 
    {
        update: { method: "PUT" }
    })
]

Hazme saber si tienes alguna pregunta.