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!