1

Durante el proceso de inicio de sesión de la aplicación web, utilizo un sistema de autenticación por token.

Partiendo de una ventana de inicio de sesión, envío una petición al servidor y este me devuelve un token que será necesario para el acceso a rutas protegidas, que irá en las peticiones http siguientes del cliente, en una cabecera x-access-token.

Una vez que tengo el token de sesión, lo que quiero es cargar directamente la página del panel de administración.

Es decir, el cliente inicia sesión, le dan un token, y se va a una ruta protegida pasando ese token.

Actualmente, había pensado en una petición AJAX y luego otra petición más básica, algo como esto:

function autenticarse(){
  $("#credenciales").bind("submit",function() {
    $.ajax({
      url: $('#credenciales').attr('action'),
      data: $('#credenciales').serialize(),
      type: $('#credenciales').attr("method"),
      cache: false,
      success: function (json) {
        if (json.success) {
          var xhr = new XMLHttpRequest();
          xhr.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
              myFunction(this);
            }
          };
          sessionStorage.setItem("tokenGS", json.token);
          xhr.open("GET", "http://localhost:8080/admin/panel", true);
          xhr.setRequestHeader("Content-Type", "application/html");
          xhr.setRequestHeader("x-access-token", sessionStorage.getItem("tokenGS"));
          xhr.send();

          function myFunction(xml) {
            //var xmlDoc = xml.responseXML;
            //parser = new DOMParser();
            //xmlDoc = parser.parseFromString(xhr.responseText,"application/xml");
            //alert(xml.responseText);
            //window.createRequest();
          }

        } else {
          document.location.href="http://localhost:8080/loginErroneo";
        }
      },
      error: function (xhr, status) {
        document.location.href="http://localhost:8080/404";
      }
    });
    return false;
  });
}

Esto se realiza todo correctamente, pero no se me carga la segunda petición, la puedo ver en Firebug en el navegador pero no se me carga.

introducir la descripción de la imagen aquí

El servidor, es NodeJS, y devuelve una plantilla EJS con la siguiente instrucción:

res.render('1panel');

¿Cómo hago para que al usuario se le cargue en el navegador la segunda petición que realizo en el código?

2
  • esto te podría servir es.stackoverflow.com/q/3582/6635
    – JuankGlezz
    Commented el 7 nov. 2016 a las 6:49
  • @JuankGlezz creo haber probado ya algo asi, y tampoco se me carga la respeusta que recibo. Si el problema no esta en no recibir respeusta, la respuesta se recibe, lo que no consigo es mostrar el html (la respuesta) en el navegador automaticamente. Commented el 8 nov. 2016 a las 13:39

3 respuestas 3

1

Por lo que veo el problema está en que tratas de acceder a una propiedad no definida en la función onreadystatechange del objeto xhr. Recuerda que en javascript el ambito de una función define un nuevo contexto para this, en este caso this se refiere a la función callback no al objeto xhr.

Puedes resolverlo cambiando this por xhr y cambiando myFunction(this) por xhr.responseText o xhr.responseXML en estas líneas:

if (this.readyState == 4 && this.status == 200) {
    myFunction(this);
}

para que queden de la siguiente forma:

if (xhr.readyState == 4 && xhr.status == 200) {
    myFunction(xhr.responseText);
}
0

Prueba a depurar paso a paso a ver si en algún momento, alguna variable no tiene el dato que requieres. Por ejemplo en la línea

$('#credenciales').attr('action') 

Que realmente tenga una URL correcta

json.success

Que exista y sea true

Y si puedes, ya que estás utilizando jQuery, en lugar de utilizar en la 2a petición XMLHTTPRequest, utiliza de nuevo $.ajax o $.get.

3
  • Antes de nada muchas gracias Carlos por pasarte y ver mi problema. Respecto a lo que dices de usar una segudna peticion ajax, antes lo tenia asi pero no se porque el navegador se lia e inexplicamente me abre una ventana con el json de la primera peticion, mostrandome los 3 campos del json, pOo lo que la quite y meti el objeto XMLHttpRequest. Respecto a lo que me comentas de depurar la url, yo creo que esta bien, porque como se aprecia en la captura de FIrebug, sí se realiza la segunda llamada ya que se peude ver la respuesta al a peticion en la imagen. Commented el 8 nov. 2016 a las 13:32
  • El problema reside en que el navegador no carga la respuesta, pero si la recibe. Commented el 8 nov. 2016 a las 13:37
  • Acabo de depurar y esta todo bien. Si el problema esta en que no se como mostrar la respeusta recibida con el html, que si se recibe: Commented el 9 nov. 2016 a las 10:59
0

espero ayudarte en el tema yo uso con mucha frecnuencia esta porción de código:

  $(document).ready(function () {

   var config = {
    url: '../../aplicacion/crud/index.php',
    variables: 'tabla'
   };
  var fuentedata = sendData(config);
  function  sendData(config)
  {//json captura
   var json = null;
   $.ajax({
    'type': "POST",
    'data': config,
    'async': false,
    'global': false,
    'url': '' + config.url,
    'dataType': "json"
    , 'beforeSend': function (data)
    {
       // console.log('... cargando...');
    }
    , 'error': function (data) {
        //si hay un error mostramos un mensaje
        console.log('Tenemos problemas Houston ' + data);
    },
    'success': function (data) {
        json = data;
    }
    });
    return json;
   }

 });

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.