2

Estoy haciendo un módulo de usuarios en Angular JS. Al momento de hacer un login equivocado, quiero mostrar una alerta de Bootstrap que diga que la contraseña o usuario están equivocadas.

El mensaje llega hasta el controller de angular pero no actualiza la vista. Ya intente con la funcion $apply, pero arroja un error que dice apply ya esta en ejecución.

Aquí muestro el Controller:

angular.module("login") 
    .controller('loginController',function($scope,$http,LocalStore,jwtHelper,$location,authFactory){

        $scope.jwt = LocalStore.getJWT();
        $scope.error;

        if(authFactory.isLogIn()){
            $location.path("/home");
        }

        $scope.logIn = function(user){
            authFactory.logIn(user);
            $scope.error = authFactory.getError();

        };

        $scope.logOut = function(){
            console.log($scope.error);
            $scope.error = authFactory.getError();
        };

    });

A continuación muestro el Factory que hice para validar los logins

.factory("authFactory", function($http, LocalStore, $location, jwtHelper){

var authFactory = {};
    authFactory.errores="-";

    authFactory.logIn = function(user){
        $http({
                method: 'POST',
                skipAuthorization: true,
                url: 'login.php',
                data: { op:'login', username: user.username, password: user.password } ,
                headers: {'Content-Type': 'application/x-www-form-urlencoded'}
        }).then(function successCallback(response) {
            console.log("Entrando al success");
            if('jwt' in response.data){
                console.log("Login Exitoso");
                LocalStore.saveJWT(response.data.jwt);
            }else if('error' in response.data){
                console.log("Login Erroneo");
                authFactory.errores = response.data.error;
                console.log("Imprimiendo authFactory: " + authFactory.errores);
            };
            if(authFactory.isLogIn){
                $location.path("/home");
            }else{
                $location.path("/login");
            }
      }, function errorCallback(response) {
            console.log("Login Fallido jajajajaj");
      });


    };

    authFactory.getError=function(){
        console.log("Obteniendo AuthFactory en get Error: "+ authFactory.errores);
        return authFactory.errores;
    };

Este es el template del login:

<div class="row">
<div class="col-sm-4">
        <div class="alert alert-success" role="alert" ng-show="error">
            <strong>Well done!</strong> {{error}}.
        </div>
    </div>
    <div class="col-sm-4" align="center">
        <input type="text" ng-model="user.username" placeholder="Username" class="form-control form-group">
    <input type="password" ng-model="user.password" placeholder="Password" class="form-control form-group">
    <button class="btn btn-primary btn-large form-group" ng-click="logIn(user)">Log In</button> 
    </div>
    <div class="col-sm-4"></div>    
</div>

1 respuesta 1

3

El problema es que el login es una función asincrónica (utiliza ajax) por lo que estas enviando la petición e intentando recoger los errores resultantes al mismo tiempo. La solución mas sencilla es retornar una promesa y recoger los errores luego de que esta se haya terminado.

Cambia tu función authFactory.logIn a esto

authFactory.logIn = function(user){
    // al retornar la llamada a la función estas devolviendo un promise implicitamente
    return $http({
            method: 'POST',
            skipAuthorization: true,
            url: 'login.php',
            data: { op:'login', username: user.username, password: user.password } ,
            headers: {'Content-Type': 'application/x-www-form-urlencoded'}
    }).then(function successCallback(response) {
        console.log("Entrando al success");
        // manejas primero el error
        if ('error' in response.data) {
            console.log("Login Erroneo");
            // retornas una promesa rechazada
            return $q.reject(response.data);
        }
        // Si no ocurrieron errores la petición es satisfactoria
        console.log("Login Exitoso");
        LocalStore.saveJWT(response.data.jwt);

        if(authFactory.isLogIn){
            $location.path("/home");
        }else{
            $location.path("/login");
        }
        // Retornas el token para encadenar un then
        return response.data.jwt;
  }).catch(function errorCallback(response) {
     console.log("Login Fallido jajajajaj");
     // Retornas el contenido del error
     return $q.reject(response.data.error || response.data);
  });
};

y luego en tu controller haces esto

$scope.logIn = function(user){
    authFactory.logIn(user).then(function() {
        // aquí pones lo que quieras
    }).catch(function(error) {
        // aquí manejas el error
        // ya el método authFactory.getError() sobra
        $scope.error = error;
    });
};

También puedes hacer

$scope.logIn = function(user){
    // ya que el factory lo hace todo no es necesario un método then, solo recoger el error
    authFactory.logIn(user).catch(function(error) {
        // aquí manejas el error
        $scope.error = error;
    });
};

Para que esto funcione debes inyectar $q como dependencia porque uso $q.reject en una parte del código del Factory

No uses then(successFn, errorFn) en su lugar usa then(successFn).catch(errorFn), el primero es un anti patrón.

Debes retornar algo (return [objeto]) en el cuerpo del then o el catch para seguir encadenando, de lo contrario JavaScript retornará return undefined; automáticamente por ti.

4
  • 1
    He hecho una reversión ya que el código lo debería editar devconcept. Dejo el comentario para que lo vea y lo edite. Commented el 7 sept. 2016 a las 8:27
  • 1
    @MiquelColl Gracias. La edición es de hecho un error ya que una vez que se entra en el canal del catch la promesa está rechazada y no hay necesidad de rechazarla de nuevo. Con poner otro catch handler es suficiente.
    – devconcept
    Commented el 7 sept. 2016 a las 13:31
  • Sorry.. :P soy novato en esto de stackoverflow.... amm.. como pondría ese otro catch handler... se pondría en el controller?? Commented el 7 sept. 2016 a las 14:26
  • 1
    @HiramHernandez Tienes razón en la edición, no había revisado bien. Cuando leí la respuesta confundí lo que ponías con un catch filtrado. Diferentes librerías implementan los métodos de formas diferentes y $q no es conocida precisamente por ser una librería completa. Edición corregida.
    – devconcept
    Commented el 7 sept. 2016 a las 17:24

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.