0

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>"
    }
]

1 respuesta 1

0

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 2 asuntos:

  • 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).
  • Indicar la URL correcta para la petición.

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>

Referencias

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.