0

Tengo un problema, ya que quiero verificar con Javascript si la cookie está almacenada en el navegador y que si está almacenada, me deje en la página y en caso de que no esté almacenada me redirija a la página de inicio de sesión. El problema es que no solo no funciona, sino que tampoco se muestra ningún error en consola, entonces no sé cuál puede ser el error. Al no funcionar la validación de cookies, permite que incluso los usuarios que no estén registrados puedan acceder al contenido cuando no debería ser así.

Adjunto mi código.

window.addEventListener('DOMContentLoaded', () => {
    // Obtener todas las cookies
var cookies = document.cookie.split(';');

// Recorrer todas las cookies
for (var i = 0; i < cookies.length; i++) {
    var cookie = cookies[i].trim();
    
    // Verificar si la cookie es la que nos interesa
    if (cookie.indexOf('sesion=') == 0) {
        // Obtener el valor de la cookie
        var value = cookie.substring('sesion='.length, cookie.length);

        // Verificar si el valor es "true"
        if (value === "true") {
            alert("Log In Autorizado");
        } else {
            window.location.replace('index.html');
        }
        break;
    }
}
  });
<!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">


    <link rel="stylesheet" href="css/test.css">
    <title>Test de liderazgo</title>
</head>

<body>
    <header class="bg-orange-600 hidden md:block">
        <nav class="flex items-center justify-between flex-wrap bg-teal p-6">
            <div class="flex items-center flex-no-shrink text-white mr-6">
                <img class=" mr-2" src="https://allesconsultores.com.ar/wp-content/uploads/2021/04/logo-nav-alles.png"
                    alt="logo">
            </div>
            <div class="block lg:hidden">
                <button
                    class="flex items-center px-3 py-2 border rounded text-teal-lighter border-teal-light hover:text-white hover:border-white">
                    <svg class="h-3 w-3" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                        <title>Menu</title>
                        <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z" />
                    </svg>
                </button>
            </div>
            <div class="w-full block flex-grow lg:flex lg:items-center lg:w-auto justify-center">
                <div class="text-sm lg:flex-grow">
                    <a href="#responsive-header"
                        class="text-white block mt-4 lg:inline-block lg:mt-0 text-teal-lighter hover:text-orange mx-4">
                        Inicio
                    </a>
                    <a href="#responsive-header"
                        class="text-white block mt-4 lg:inline-block lg:mt-0 text-teal-lighter hover:text-orange mx-4">
                        Estadísticas
                    </a>
                    <a href="#responsive-header"
                        class="text-white block mt-4 lg:inline-block lg:mt-0 text-teal-lighter hover:text-orange">
                        Perfil
                    </a>
                </div>

            </div>
        </nav>
    </header>
    <main>
        <div class="flex justify-center mt-5">
            <div class="grid sm:grid-cols-1 md:grid-cols-2 gap-4 mx-auto">
                <div
                    class="flex flex-col items-center bg-white border border-gray-200 rounded-lg shadow md:flex-row md:max-w-xl hover:bg-gray-100 dark:border-gray-700 dark:bg-gray-800 dark:hover:bg-gray-700 ">
                    <a href="tests/liderazgoempresarial.html"
                        class="flex flex-col items-center bg-white border border-gray-200 rounded-lg shadow md:flex-row md:max-w-xl hover:bg-gray-100 dark:border-gray-700 dark:bg-gray-800 dark:hover:bg-gray-700">
                        <img class="img-container object-cover w-full rounded-t-lg h-96 md:h-auto md:w-48 md:rounded-none md:rounded-l-lg"
                            src="img/lider-img.jpg" alt="Lider">
                        <div class="flex flex-col justify-between p-4 leading-normal">
                            <h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">Test de
                                aptitudes para Liderazgo Empresarial</h5>
                            <p class="mb-3 font-normal text-gray-700 dark:text-gray-400">Midiendo tus habilidades para
                                liderar al éxito empresarial según el modelo de liderazgo situacional de Hersey y
                                Blanchard</p>
                        </div>
                    </a>
                </div>

                <div
                    class="flex flex-col items-center bg-white border border-gray-200 rounded-lg shadow md:flex-row md:max-w-xl hover:bg-gray-100 dark:border-gray-700 dark:bg-gray-800 dark:hover:bg-gray-700 ">
                    <a href="#"
                        class="flex flex-col items-center bg-white border border-gray-200 rounded-lg shadow md:flex-row md:max-w-xl hover:bg-gray-100 dark:border-gray-700 dark:bg-gray-800 dark:hover:bg-gray-700">
                        <img class="img-container object-cover w-full rounded-t-lg h-96 md:h-auto md:w-48 md:rounded-none md:rounded-l-lg"
                            src="img/basha-img.jpg" alt="">
                        <div class="flex flex-col justify-between p-4 leading-normal">
                            <h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">Descubre
                                tus
                                habilidades de liderazgo organizacional</h5>
                            <p class="mb-3 font-normal text-gray-700 dark:text-gray-400">Realiza nuestro test de
                                aptitudes según
                                el modelo de liderazgo situacional de Hersey y Blanchard y conoce tu perfil de liderazgo
                                para
                                alcanzar el éxito empresarial.</p>
                        </div>
                    </a>
                </div>
            </div>
        </div>
        <!-- Desarrollado por -->
        <div class="bg-white py-24 sm:py-32 mx-8 mt-4">
            <div class="mx-auto grid max-w-7xl gap-y-20 gap-x-8 px-6 lg:px-8 xl:grid-cols-3">
                <div class="max-w-2xl">
                    <h2 class="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">Nuestro equipo</h2>
                    <p class="mt-6 text-lg leading-8 text-gray-600">Somos los encargados de ayudarte a llevar al máximo tu potencial y poder ser quienes estamos listos para cambiar tu vida en la empresa.</p>
                </div>
                <ul role="list" class="grid gap-x-8 gap-y-12 sm:grid-cols-2 sm:gap-y-16 xl:col-span-2">
                    <li>
                        <div class="flex items-center gap-x-6">
                            <img class="h-16 w-16 rounded-full"
                                src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
                                alt="">
                            <div>
                                <h3 class="text-base font-semibold leading-7 tracking-tight text-gray-900">Raúl Castro</h3>
                                <p class="text-sm font-semibold leading-6 text-indigo-600">Co-Fundador y Encargado de RRHH</p>
                            </div>
                        </div>
                    </li>

                    <li>
                        <div class="flex items-center gap-x-6">
                            <img class="h-16 w-16 rounded-full"
                                src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
                                alt="">
                            <div>
                                <h3 class="text-base font-semibold leading-7 tracking-tight text-gray-900">Carolina Romera</h3>
                                <p class="text-sm font-semibold leading-6 text-indigo-600">Co-Fundador y Encargado de RRHH</p>
                            </div>
                        </div>
                    </li>
                    
                </ul>
            </div>
        </div>
    </main>

    <footer>
        <div
            class="md:hidden fixed bottom-0 left-0 z-50 w-full h-16 bg-white border-t border-gray-200 dark:bg-gray-700 dark:border-gray-600">
            <div class="grid h-full max-w-lg grid-cols-3 mx-auto">
                <a href="tests.html" type="button"
                    class="inline-flex flex-col items-center justify-center px-5 hover:bg-gray-50 dark:hover:bg-gray-800 group">
                    <svg class="w-6 h-6 mb-1 text-gray-500 dark:text-gray-400 group-hover:text-blue-600 dark:group-hover:text-blue-500"
                        fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                        <path
                            d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z">
                        </path>
                    </svg>
                    <span
                        class="text-sm text-gray-500 dark:text-gray-400 group-hover:text-blue-600 dark:group-hover:text-blue-500">Inicio</span>
                </a>
               
                <a type="button"
                    class="inline-flex flex-col items-center justify-center px-5 hover:bg-gray-50 dark:hover:bg-gray-800 group">
                    <img class="w-6 h-6 mb-1 text-gray-500 dark:text-gray-400 group-hover:text-blue-600 dark:group-hover:text-blue-500" src="img/graph.svg" alt="Grafico">
                    <span
                        class="text-sm text-gray-500 dark:text-gray-400 group-hover:text-blue-600 dark:group-hover:text-blue-500">Estadísticas</span>
                </a>
                <a type="button" href="profile.html"
                    class="inline-flex flex-col items-center justify-center px-5 hover:bg-gray-50 dark:hover:bg-gray-800 group">
                    <svg class="w-6 h-6 mb-1 text-gray-500 dark:text-gray-400 group-hover:text-blue-600 dark:group-hover:text-blue-500"
                        fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                        <path clip-rule="evenodd" fill-rule="evenodd"
                            d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-6-3a2 2 0 11-4 0 2 2 0 014 0zm-2 4a5 5 0 00-4.546 2.916A5.986 5.986 0 0010 16a5.986 5.986 0 004.546-2.084A5 5 0 0010 11z">
                        </path>
                    </svg>
                    <span
                        class="text-sm text-gray-500 dark:text-gray-400 group-hover:text-blue-600 dark:group-hover:text-blue-500">Perfil</span>
                </a>
            </div>
        </div>
    </footer>
    <script src="js/validatecookies.js"></script>
</body>

</html>

Muchas gracias!

1 respuesta 1

2

Debe haber algún error en la lógica que utilizas para obtener el valor de la cookie deseada, además las cookies no lanzan errores explícitamente (errores que pueden capturarse con try/catch) sino que puede que las cookies no se creen, o reemplacen otras sin siquiera avisar al programador, así que debemos tener cuidado con su manejo. Prueba el siguiente código:

// creando cookies
document.cookie = "anothercookie=anothervalue";
document.cookie = "session=false";
document.cookie = "cookie=value"

window.addEventListener("DOMContentLoaded", () => {
  // dividimos el string en un array por el caracter separador ; cada posicion tendra una cookie
  let cookies = document.cookie.split(";");
  // hallamos el elemento del array que comience con 'session=' usando el metodo 'find', trim() es para eliminar posibles espacios en blanco al principio o al final
  let cookie = cookies.find((curr) => curr.trim().startsWith("session="));
  // obtenemos el valor de la cookie
  let cookievalue = cookie.split("=")[1];

  if (JSON.parse(cookievalue)) { // JSON.parse solo pasara la cadena 'true' a un valor true (boolean) real, pero puedes hacer cookievalue==='true' si prefieres
    alert("Log in autorizado"); // te mantiene en la pagina actual
  } else {
    alert("Log in rechazado, seras dirigido a otra pagina");
    window.location.replace("https://www.google.com.ar"); // te redirige hacia otra pagina
  }
});

Aquí tienes la documentación de Array.find()

Aclaracion: hice el codigo para validar que la cookie fuese "session=true" o "session=false", si quieres verificar solamente que la cookie "session=true" exista, puedes aprovechar que el metodo find() devuelve undefined si no encuentra un elemento del array que cumpla con el predicado.

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.