Hice una autenticación simple usando JS Fetch api, pero el problema ahora es que no sé cómo puedo proteger mis páginas html (me refiero a no permitir que los usuarios que no han iniciado sesión vean esas páginas). hay muchos tutoriales sobre autenticación y autorización, pero no es lo que busco, la mayoría de ellos funcionan con Asp.net o reaccionan, etc.
PD: para el frontend, solo estoy usando html/css/js y para el backend, estoy usando spring boot.
Fátima. Hay varias formas en las que puedes hacer esto. Mi recomendación, dado que está utilizando html/css y Vanilla JS, es llamar a su punto final de autenticación, almacenar en la sesión los datos necesarios (token de autenticación, tiempo de espera, lo que tenga) y crear una protección de ruta, que es una pieza de JS que comprueba si los datos almacenados en la sesión son válidos, antes de permitir la visualización de la página. Tenga en cuenta que este no es un código optimizado y que hay formas más seguras.
Autorización:
var xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { // Save your auth data to session localStorage.setItem("auth", xhr.response) } }; xhttp.open("POST", "your/auth/endnpoint"); xhttp.send();Guardia de ruta:
authData = localStorage.getItem("auth") //Make your validations here. if(authData){ }else{ window.location.href = "your-permission-error-page"; }Si importa la protección de ruta en cada página que tiene, si su validación falla, el usuario puede ser redirigido a una página de error.