Question

我正在尝试创建一个页面，其中有两种类型的用户，一种类型可以做一些事情而另一种可以做更多事情。有点像1个用户拥有正常的用户权限而另一个获得管理员权限。

基本上，一种类型的用户是客户，另一种类型是管理员。

我希望我的页面根据用户类型显示不同的内容。我知道你可以通过创建单独的页面来实现它，但我想以这种方式尝试。

我已经有一个功能用户注册页面和一个功能用户登录。此页面将是您在

登录后获得的页面

它只能是JS和HTML。

用于登录的HTML

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />

        <title>Proyecto Final</title>
        <link rel="stylesheet" href="css/style.css" />
        <link rel="stylesheet" href="css/style2.css" />
        <link rel="stylesheet" href="css/style3.css" />
    </head>
    <body>
        <header>
            <div class="conteiner cf">
                <img src="images/logo2.png" alt="Logo" class="logo">
                <nav>
                    <a href="index.html">Usuario</a>
                <!--    <a href="#">About</a> -->
                    <a href="contact.html">Instructor</a>
                </nav>
            </div>
        </header>


            <div class="conteiner2 cf">

                <aside class="Texto cf">
                    <h1 class="h1texto">Usuario</h1>


                        <form class="login-form">
                          <input type="text" placeholder="Username" id="txtUsername"/>

                          <input type="password" placeholder="Password"id="txtPassword"/>

                          <input type="button" value="Ingresar" id="btnIngresarLogin">


                          <p class="message">Estas registrado? <a href="register.html">Crear una nueva cuenta</a></p>
                        </form>

                </aside>

            </div>


    <footer class="footerfinal cf">
            <div class="conteinerfooter cf">
                <p class="ParrafoFooter cf">2014 copyright</p>
                <nav class="NavFooter">
                    <a href="#">Index</a>
                    <a href="#">About</a>
                    <a href="#">Contact</a>
                </nav>
            </div>

    </footer>
    <script src="js/logicaNegociosUsuarios.js"></script>
    <script src="js/logicaInterfazInicioSesion.js"></script>

    </body>


</html>

用于登录的js

document.querySelector('#btnIngresarLogin').addEventListener('click', IniciarSesion);

function IniciarSesion(){
  var sUsername ='';
  var sPassword ='';
  var bAcceso = false;


  sUsername = document.querySelector('#txtUsername').value;
  sPassword = document.querySelector('#txtPassword').value;


  bAcceso = validarCredenciales(sUsername, sPassword);

  if (bAcceso === true){
    window.location.href = 'perfil.html';
  }
}

function validarCredenciales(psUsername, psPassword){
  var listaUsuarios = obtenerListaUsuarios();
  var bAcceso = false;
  var usuario = obtenerListaUsuarios().map(function (usuario) {
    if(usuario[10] === psUsername){
      if(usuario[11] === psPassword){
        bAcceso = true;
        localStorage.setItem('rolUsuarioActivoLS', JSON.stringify(usuario));
      }
    }
  });
  if(!bAcceso){
    alert('Credenciales incorrectos');
  }
  return bAcceso;
}

和页面的html我希望用户被重定向到

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Perfil</title>
</head>
<body>
    <table>
        <tbody>
            <tr>
                <td>Cédula</td>
                <td id="txtIdentificacion" contenteditable>Cédula</td>
            </tr>
            <tr>
                <td>1er Nombre</td>
                <td id="txtPrimerNombre" contenteditable>Cédula</td>
            </tr>
            <tr>
                <td>2ndo Nombre</td>
                <td id="txtSegundoNombre" contenteditable>Cédula</td>
            </tr>
            <tr>
                <td>1er Apellido</td>
                <td id="txtPrimerApellido" contenteditable>Cédula</td>
            </tr>
            <tr>
                <td>2ndo Apellido</td>
                <td id="txtSegundoApellido" contenteditable>Cédula</td>
            </tr>
            <tr>
                <td>Nacionalidad</td>
                <td id="txtNacionalidad" contenteditable>Cédula</td>
            </tr>
            <tr>
                <td>Tipo de Identificacion</td>
                <td id="txtTipoIdentificacion" contenteditable>Cédula</td>
            </tr>
            <tr>
                <td>Fecha de Nacimiento</td>
                <td id="datFechaNacimiento" contenteditable>Cédula</td>
            </tr>
            <tr>
                <td>Edad</td>
                <td id="numEdad" contenteditable>Cédula</td>
            </tr>
            <tr>
                <td>Género</td>
                <td id="rbtGenero" contenteditable>Cédula</td>
            </tr>
            <tr>
                <td>Telefono</td>
                <td id="numNumeroTelefonico" contenteditable></td>
            </tr>
            <tr>
                <td>Nombre de usuario</td>
                <td id="txtNombreUsuario"></td>
            </tr>
            <tr>
                <td>Numero de emergencia</td>
                <td id="numEmergencia" contenteditable></td>
            </tr>
                <td>Instructor</td>
                <td id="instructor"></td>
            </tr>
        </tbody>
    </table>
    <button id="actualizarDatos">Actualizar</button>
<script src="js/logicaNegociosUsuarios.js"></script>
<script src="js/logicaInterfazPerfil.js"></script>
</body>
</html>

登录的当前js：

var usuario = JSON.parse(localStorage.getItem('rolUsuarioActivoLS'));
document.querySelector('#actualizarDatos').addEventListener('click', actualizarDatos);

llenarDatos();

function llenarDatos(){
    document.querySelector('#txtIdentificacion').innerHTML = usuario[0]
    document.querySelector('#txtPrimerNombre').innerHTML = usuario[1]
    document.querySelector('#txtSegundoNombre').innerHTML = usuario[2]
    document.querySelector('#txtPrimerApellido').innerHTML = usuario[3]
    document.querySelector('#txtSegundoApellido').innerHTML = usuario[4]
    document.querySelector('#txtNacionalidad').innerHTML = usuario[5]
    document.querySelector('#txtTipoIdentificacion').innerHTML = usuario[6]
    document.querySelector('#datFechaNacimiento').innerHTML = usuario[7]
    document.querySelector('#rbtGenero').innerHTML = usuario[8]
    document.querySelector('#numNumeroTelefonico').innerHTML = usuario[9]
    document.querySelector('#txtNombreUsuario').innerHTML = usuario[10]
    document.querySelector('#numEdad').innerHTML = usuario[12];
    document.querySelector('#numEmergencia').innerHTML = usuario[14]
    document.querySelector('#instructor').innerHTML = usuario[15]
}

function actualizarDatos(){
    usuario[0] = document.querySelector('#txtIdentificacion').innerHTML;
    usuario[1] = document.querySelector('#txtPrimerNombre').innerHTML;
    usuario[2] = document.querySelector('#txtSegundoNombre').innerHTML;
    usuario[3] = document.querySelector('#txtPrimerApellido').innerHTML;
    usuario[4] = document.querySelector('#txtSegundoApellido').innerHTML;
    usuario[5] = document.querySelector('#txtNacionalidad').innerHTML;
    usuario[6] = document.querySelector('#txtTipoIdentificacion').innerHTML;
    usuario[7] = document.querySelector('#datFechaNacimiento').innerHTML;
    usuario[8] = document.querySelector('#rbtGenero').innerHTML;
    usuario[9] = document.querySelector('#numNumeroTelefonico').innerHTML;
    usuario[10] = document.querySelector('#txtNombreUsuario').innerHTML;
    usuario[12] = document.querySelector('#numEdad').innerHTML;
    usuario[14] = document.querySelector('#numEmergencia').innerHTML;
    localStorage.setItem('rolUsuarioActivoLS', JSON.stringify(usuario));
    alert('Usuario actualizado')
}

Answer 1

如果您的限制仅设置为HTML / JS，那么您可以使用document.cookie并根据用户是管理员还是客户为用户设置Cookie。然后，您可以检查cookie并根据用户类型有条件地呈现页面。

详细了解如何实施document.cookie here。

如何根据用户权限使页面显示不同的内容？

1 个答案: