javascript - ejemplos - paginas web con angularjs

AngularJS: maneja las rutas antes del inicio de la aplicación

Question

¿Está bien usar un Servicio dentro de $stateProvider , para este propósito?

He pasado por muchos mensajes en la pila con respecto al enrutamiento, pero la mayoría son confusos para principiantes ya que todos usan un enfoque diferente y lo tratan como ciencia de cohetes. Me gustaría desarrollar buenos hábitos desde el principio y evitar los malos ...

Objetivo : ejecutar algunas funciones antes de que se inicie la aplicación y en función de esa ruta de salida mi usuario final.

Lo que he intentado:

Implementar un servicio >> AuthService | Acciones >> verificación simple para:

1. Obtiene token JWT desde el lado del cliente (DB SQLite) - El token contiene detalles básicos + clave API
2. Enviar al servidor para la autenticación
3. Respuesta (booleana)
4. Si está autorizado >> carga la vista de inicio. De lo contrario, redirija para registrar View.
5. La validación del lado del servidor se lleva a cabo antes de cargar cualquier vista

Proveedores de servicio

myApp.factory(''AuthService'', function ( Session) {
         var authService = {};
          authService.isAuthorized = function(){
          return Session.authorized() ;
         };
        return authService;
 });


myApp.service(''Session'', function ($resource, $q, $timeout, URL_Config) {
  this.authorized = function () {
        var deferred = $q.defer();
        $timeout(function () {
            var db = window.openDatabase("config.db", "1.0", "Config", 2 * 1024 * 1024);
            db.transaction(function (tx) {
                tx.executeSql("SELECT * FROM user_details", [], function (tx, data) {
                    var token = data.rows.item(0).token;
                    var request = $resource(URL_Config.BASE_URL + ''/authCheck'', {token: token },
                        { query: {
                            isArray: false,
                            method: ''GET''
                        } });
                    request.query(function (res) {
                        if (res.error) {
                            deferred.resolve(false);
                        } else {
                            deferred.resolve(true);
                        }
                    });

                }, function (e) {
                    deferred.resolve(false);
                });
            });
        }, 500);
        return deferred.promise;
    };

 return this;
 });

Configuración de ruta

Esta es la parte con la que estoy luchando. ¿Dónde y cómo inyectar este servicio? Lo tengo funcionando, pero no estoy seguro de si esta es la forma correcta de manejarlo.

• ¿Llamar al servicio dentro de la propiedad de $stateProvider de $stateProvider ?
• basado en el valor de AuthService redirigir para ver
• Proceso antes de que comience la aplicación.

myApp.config(function($stateProvider, $urlRouterProvider ) {
   $urlRouterProvider.otherwise(''/home'');
   $stateProvider
    .state(''home'', {
        url: ''/home'',
        templateUrl: ''templates/home.html'',
        controller: ''MainController'',
        resolve: [''AuthService'', function(AuthService, $location, $q){
            var deferred = $q.defer();
            var authChk = AuthService.isAuthorized(); 
            authChk.then(function(data){
                if(!data){
                    $location.path(''/register''); 
                    deferred.resolve();
                } else{
                    $location.path(''/home'');
                    deferred.resolve();
                }
            }, function(e){
                $location.path(''/register'');
                deferred.resolve();
            });
            return deferred.promise;
        }]
    })
    .state(''register'', {
        url: ''/register'',
        templateUrl: ''templates/register.html'',
        controller  : ''RegisterController'',
        resolve: [''AuthService'', function(AuthService, $location, $q){
            var deferred = $q.defer();
            var authChk = AuthService.isAuthorized();
            authChk.then(function(data){
                if(!data){
                    $location.path(''/register'');
                    deferred.resolve();
                } else{
                    $location.path(''/home'');
                    deferred.resolve();
                }
            }, function(e){
                $location.path(''/register'');
                deferred.resolve();
            });
            return deferred.promise;
        }]
    })
});

¿Es este el lugar apropiado para ejecutar dicha validación de Autenticación?

Esta es una demostración simple de Hello World para comenzar con Angular. No tengo navegación (vistas múltiples) por lo que la verificación debe ser directa.

He visto muchos ejemplos usando locationChangeStart para iniciar un servicio antes de que se cargue una vista. Luego, $scope.watch y $broadcast se usan cuando se manejan sesiones (tampoco es el caso) pero pueden ser útiles para usos futuros.

Gracias. Cualquier consejo sobre cómo y dónde manejar este escenario es bienvenido.

Answer 1

Esto es realmente algo que tuve que hacer también. Puede usar la resolve en cada uno de los estados.

En el siguiente código, tengo una función resolveUserAuth que devolverá el objeto del usuario.

 var resolveUserAuth = {
    ''userAuth'': function (AuthService, $rootScope) {
      if ($rootScope.user) {
        return $rootScope.user;
      } else {
        return myApp._getUserAuth(AuthService, $rootScope);
      }
    }
  };

  $stateProvider
    .state(''login'', {
      url: ''/login'',
      templateUrl: ''views/login.html'',
      controller: ''LoginCtrl''
    })
    .state(''logout'', {
      url: ''/logout'',
      templateUrl: ''views/login.html'',
      controller: ''LoginCtrl''
    })
    .state(''home'', {
      url: ''/home'',
      templateUrl: ''views/home.html'',
      controller: ''HomeCtrl'',
      resolve: resolveUserAuth
    })

getUserAuth

myApp._getUserAuth = function (service, rootScope) {
  return service.getRole().then(function () {
    service.getUser().then(function (user) {
      rootScope.user = user;
    });
  });
};

iniciar sesión

 service.login = function (data) {
    var promise = $http.post(''/auth/login'', data).then(function (response) { // Success
      $rootScope.user = response.data;
      AssignedService.get({},
        function(assigned) {
          $rootScope.assigned = assigned;
          $rootScope.showLogin = false;
        }, function(error) {
          if (console && console.error) {
            console.error(''Error getting assigned: '', error);
          }
        }
      );
      return response;
    }, function() { // Error
      $rootScope.showAlert(''Unable to login, please try again'', ''danger'');
    });

    return promise;
  };