En la página de Login cambias a la página de Marcación, si el inicio de sesión es correcto.
window.location.href = "marcación.html";
Mi sugeriencia es solicitar las opciones del menú después de cargar la página. Por ejemplo, creamos un archivo comun.js y vinculamos este archivo con las páginas de Marcación, Registro y Verificación.
<script src="../js/comun.js"></script>
Contenido de comun.js:
// Cuando finaliza la carga del documento,
// solicitamos opciones del menú para el rol A
$(document).ready(function() {
$.getJSON("http://.........", {rol: "A"})
.done(function(jsonArray) {
// He puesto el nombre de jsonArray porque en este caso tu servicio
// devuelve un JSON Array que contiene elementos de tipo JSON Object.
// Por tanto, debes saber la estructura de tu JSON para extraer
// la propiedad opc_html.
var $ul = $('#menu nav ul');
$.each(jsonArray, function(i, opcion) {
$ul.append(opcion.opc_html);
});
// Añadimos el enlace de "salir"
$ul.append('<li><a href="#">salir</a></li>');
})
.fail(function(jqxhr, textStatus, error) {
var err = textStatus + ", " + error;
console.log("Error al obtener opciones del menú: " + err);
});
});
Nota que añadimos el botón "Salir" dinámicamente, por tanto puedes retirar ese código HTML en las 3 páginas. El código HTML del menú queda así:
<div id="menu" class="menu">
<img src="../img/QG-marca-principal.png" alt="">
<nav>
<ul>
</ul>
</nav>
</div>
Esta es una posibilidad. Hay otras alternativas para este mismo código como:
- Usar $.insertBefore() para insertar nuevos enlaces justo antes del botón "Salir". Así no quitas el código HTML del botón "Salir".
- No esperar a la carga completa del documento HTML. Puedes ejecutar directamente
$.getJSON()
justo después de cargar el código HTML del menú. Esto es posible porque el API jQuery está ya cargado (se cargó durante la carga del header).
Te dejo a ti pasar el valor del rol correcto (ya sea recuperándolo de otra petición, del almacenamiento local (local storage), de un parámetro de URL, etc).
Ejemplo de $.each() con un JSON Array
var $jsonArray = JSON.parse('[{"opc_html":"<li>Marcación</li>"}, {"opc_html":"<li>Verificación</li>"}, {"opc_html":"<li>Registro</li>"}]');
$.each($jsonArray, function(i, opcion){
console.log(opcion.opc_html);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>