estoy tratando de un login y cuando el login inicie sesión se muestre los menús segun el rol del trabajador, si es admin, que se muestre 3 menús, y si es trababador, solo que se muestre una sola página; ya estoy obteniendo los datos en el console, la duda es, Cómo implementar y cómo sería la función para agregra los menpus segun el rol del trabajador? ya obtengo los datos del trabajador y los envío al otro html luego de iniciar sessión. El administrador, tiene que acceder a todos los menpus, miestras que el trabajador solo a marcación. Se agradece su apoyo, soy nuevo en estas tecnologías front. Adjunto el servicio de los link.
html login
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Marcación Asistencia - Quality Gardian</title>
<link rel="stylesheet" href="../css/style.css">
<script src="https://code.jquery.com/jquery-3.7.0.min.js" integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g=" crossorigin="anonymous"></script>
</head>
<body>
<div class="formulario">
<label >Usuario</label>
<input id="usu" type="text">
<br>
<label >Contraseña</label>
<input id="pas" type="password">
<br>
<button id="ingresar">Ingresar</button>
<div id="response-container"></div>
</div>
<script src="../js/scrip.js"></script>
</body>
</html>
js login
$(function(){
$('#ingresar').click(function(){
var usu = document.getElementById("usu").value;
var pas = document.getElementById("pas").value;
var datos={
usuario:usu,
contra:pas
};
$.ajax({
url:"http://localhost:61961/api/Login/login",
data: JSON.stringify(datos),
type:"POST",
contentType:'application/json',
success: function(response){
console.log(response);
debugger
if(!response.value.error){
localStorage.setItem('usu',JSON.stringify(response.value.data));
mostrarRespuesta(response);
setTimeout(() => {
window.location.href = "marcación.html";
}, 2000);
}else {
mostrarRespuesta(response)
}
},
error: function(error){
console.log(error);
}
});
});
})
function mostrarRespuesta(responseData) {
// Mostrar la respuesta del servidor en el contenedor
var container = document.getElementById("response-container");
container.innerHTML = responseData.value.message;
}
html marcación
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Marcación</title>
<link rel="stylesheet" href="../css/marcacion.css">
<script src="https://code.jquery.com/jquery-3.7.0.min.js" integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g=" crossorigin="anonymous"></script>
</head>
<body>
<header>
<div id="menu" class="menu">
<img src="../img/QG-marca-principal.png" alt="">
<nav>
<ul>
<li><a href="marcación.html">Asistencia</a></li>
<li><a href="verificacion.html">Verificacíón</a></li>
<li><a href="registro.html">Registro</a></li>
<li><a href="#">salir</a></li>
</ul>
</nav>
</div>
</header>
<div id="mar-asis">
<label id="lbl" for="">Bienvenido:</label>
<label id="nom-ape"></label>
<br>
<label for="">Marcar hora de ingreso</label>
<button id="marcar">Marcar</button>
<br>
<label id="ingresoSalida"></label>
</div>
<script src="../js/marcacion.js"></script>
</body>
</html>
js marcación
$(document).ready(function(){
let datos = JSON.parse(localStorage.getItem('usu'));
let nombre = datos.usu.trab_nom;
let apellidos = datos.usu.trab_ape;
$('#nom-ape').text(nombre + ' ' + apellidos);
console.log(datos);
}
);
html verificación
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Verificación</title>
<link rel="stylesheet" href="../css/verificacion.css">
<script src="https://code.jquery.com/jquery-3.7.0.min.js" integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js"></script>
</head>
<body>
<header>
<div id="menu" class="menu">
<img src="../img/QG-marca-principal.png" alt="">
<nav>
<ul>
<li><a href="marcación.html">Asistencia</a></li>
<li><a href="verificacion.html">Verificacíón</a></li>
<li><a href="registro.html">Registro</a></li>
<li><a href="#">salir</a></li>
</ul>
</nav>
</div>
</header>
<input type="text" id="calendario">
<div class="container">
<table id="datatable">
<thead>
<tr>
<th>ID</th>
<th>NOMBRE</th>
<th>CORREO</th>
<th>FECHA</th>
<th>HORA</th>
<th>TIPO</th>
<th>INGRESO</th>
<th>OBSERVACIÓN</th>
<th>VERIFICACIÓN</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div>
<script src="../js/verificacion.js"></script>
</body>
</html>
js verificación
$(document).ready(function(){
$('#current_date"').datepiker();
$.ajax({
//url: "http://localhost:61961/api/Marcacion/listaAsistencia",
url: "http://localhost:61961/api/Marcacion/listaAsistencia?fecha=20/06/2023 0:00:00",
type: "GET",
success: function(response) {
//console.log(response[0].innerText);
// Manipula los datos de la respuesta
console.log(response);
},
error: function(xhr, status, error) {
// Maneja los errores
console.error(error);
}
})
}
);
html registro
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Registrar</title>
<link rel="stylesheet" href="../css/resgistro.css">
<script src="https://code.jquery.com/jquery-3.7.0.min.js" integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g=" crossorigin="anonymous"></script>
</head>
<body>
<header>
<div id="menu" class="menu">
<img src="../img/QG-marca-principal.png" alt="">
<nav>
<ul>
<li><a href="marcación.html">Asistencia</a></li>
<li><a href="verificacion.html">Verificacíón</a></li>
<li><a href="registro.html">Registro</a></li>
<li><a href="#">salir</a></li>
</ul>
</nav>
</div>
</header>
<H1>Registrar trabajador</H1>
</body>
</html>
servicio de link
public List<Opciones> linkAcceso(string rol)
{
var link = _marcacionContext.Opciones.Where(x => x.opc_rol.Equals(rol)).ToList();
return link;
}
json que se obtiene
[
{
"opc_id": 2,
"opc_rol": "A",
"opc_nom": "administrador",
"opc_html": "<li><a href=\"marcación.html\">Asistencia</a></li>"
},
{
"opc_id": 3,
"opc_rol": "A",
"opc_nom": "administrador",
"opc_html": "<li><a href=\"verificacion.html\">Verificacíón</a></li>"
},
{
"opc_id": 4,
"opc_rol": "A",
"opc_nom": "administrador",
"opc_html": "<li><a href=\"registro.html\">Registro</a></li>"
}
]