关于用户角色的 Web 应用主题

Question

我目前正在使用 Glass-Fish 和 Servlet 开发 Web 应用程序，尽管我对如何为每个用户角色（例如管理员、讲师和客户端）处理不同 HTML 内容的逻辑概念有些困惑。假设我们在系统中拥有这些角色，并且所有人都能够登录并使用将检查数据库中是否存在的用户名和密码，因此他们将能够访问网络应用程序。

---

为了给你一个想法，请参阅下面我正在处理的示例。这里的 JavaScript 可以控制 HTML 的全部内容，但我现在通过使用字符串来做到这一点，直到我找到如何获取当前登录人的当前角色：

/* Variables Declaration */
var currentTypeLoggedIn = "ALL";

displayHomePageElements(currentTypeLoggedIn);


function displayHomePageElements(currentTypeLoggedIn){

    document.getElementById("menuBar_HOME").style.display = 'block';
    document.getElementById("menuBar_HISTORY").style.display = 'block';
    document.getElementById("menuBar_LOGOUT").style.display = 'block';
        
    if(currentTypeLoggedIn === "Student"){
        /* Display Elements in Menu Bar */
        document.getElementById("menuBar_STUDENT").style.display = 'block';

        /* Display Main Elements in the middle of the Screen */
        document.getElementById("menuInstructor").style.display = 'none';
        document.getElementById("menuAdministrator").style.display = 'none';

    }
    else if(currentTypeLoggedIn === "Instructor"){
        /* Display Elements in Menu Bar */
        document.getElementById("menuBar_INSTRUCTOR").style.display = 'block';

        /* Display Main Elements in the middle of the Screen */
        document.getElementById("menuStudent").style.display = 'none';
        document.getElementById("menuAdministrator").style.display = 'none';
    }
    else if(currentTypeLoggedIn === "Administrator"){
        /* Display Elements in Menu Bar */
       document.getElementById("menuBar_ADMINISTRATOR").style.display = 'block';
    
        /* Display Main Elements in the middle of the Screen */
        document.getElementById("menuStudent").style.display = 'none';
        document.getElementById("menuInstructor").style.display = 'none';
    }
    else if(currentTypeLoggedIn === "ALL" || currentTypeLoggedIn === ""){
        
        /* Display Elements in Menu Bar */
        document.getElementById("menuBar_INSTRUCTOR").style.display = 'block';
        document.getElementById("menuBar_STUDENT").style.display = 'block';
        document.getElementById("menuBar_ADMINISTRATOR").style.display = 'block';
        
        /* Display Main Elements in the middle of the Screen */
        //Display All - Dont take action.
    }
}

body {
    overflow: scroll; /* Add Scroll Bar at the right */
    background: #339958; 
    background: -webkit-linear-gradient(right, #339958 , #7FCC9B);
    background: -moz-linear-gradient(right, #339958, #7FCC9B);
    background: -o-linear-gradient(right, #339958, #7FCC9B);
    background: linear-gradient(to left, #7FCC9B, #339958);
    font-family: "Roboto", sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;        
}
.menuBar{

    margin-bottom: 150px;
}

#listHolder{ /* Group of Lists */
    
    /* Keep elements in line */
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    
    /* Style */
    background-color: #111;   
    border-radius: 5px;

    border-style: solid;
    border-width: 3px;
    
}
.link{ /* Menu List (Every Link) */
    float: left;
    padding: 14px 16px;
    text-decoration: none; /* Remove Underline from links */
    text-align: center;
    color: #FFFFFF;
    font-size: 25px;
    font-weight: bold;
}

.link:hover{ /* Menu List (Every Element on hover) */
    cursor:pointer;
    background-color: #b3b3b3;
}

#logoutButton{
    float: right;
}

/* Menu List (All Elements) Hide all elements, show only from javascript */
#menuBar_HOME, #menuBar_INSTRUCTOR, #menuBar_STUDENT, 
#menuBar_HISTORY, #menuBar_ADMINISTRATOR, #menuBar_LOGOUT{
   display: none;
}
#menuBar_LOGOUT:hover{
    background-color: red;
}

/* Elements in the body (4 possible options (Words Manager, Take a Test, View History, Add Members) ) */
/* Change the size of the images according to the screen size */
@media (min-width: 768px) {
  .mainContainer {
    width: 750px;
  }
}
@media (min-width: 992px) {
  .mainContainer {
    width: 970px;
  }
}
@media (min-width: 1200px) {
  .mainContainer {
    width: 1170px;
  }
}

.mainContainer {
    width: 50%;
    margin: auto;
    display: grid;
    grid-column-gap: 150px;
    grid-row-gap: 100px;
    padding: 10px;
}
.rows{
    display: flex;
}
.column {
    margin: auto;
    float: left;
    text-align: center;
    font-size: 35px;
    font-weight: bold;
    padding:1px;
    border:1px solid #021a40;
    background-color: #cce5d5;
    width: 290px;
    height: 270px;
}
.column a label{
    color: #111;
}
.container_image{
    width: 100%;
    height: 100%;
    
}

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <title>Home Page</title> <!-- Head Title -->
        <link rel="icon" href="images/homePage.png"/> <!-- Login Favicon -->
        <!-- Reference Cascade Style Sheet-->
        <link rel="stylesheet" type="text/css" href="css/menu_and_background.css"/>
        <script src="http://code.jquery.com/jquery.js"></script>
        <script src="addMenuContent.js"></script>
    </head>
    <body>
        
        <!-- Menu Bar -->
        <div class="menuBar"> 
            <ul id="listHolder">
                <li><a id="menuBar_HOME" class="link" href="/OualikoLeksiko/homePage.xhtml">Home</a></li>
                <li><a id="menuBar_INSTRUCTOR" class="link" href="WordsManagerServlet">Words Manager</a></li>
                <li><a id="menuBar_STUDENT" class="link" href="TakeTestServlet">Take a Test</a></li>
                <li><a id="menuBar_HISTORY" class="link" href="HistoryServlet">View History</a></li>
                <li><a id="menuBar_ADMINISTRATOR" class="link" href="AddUserServlet">Add Users</a></li>
                <!-- Logout Button -->
                <li id="logoutButton"><a id="menuBar_LOGOUT" class="link" href="LoginServlet">Logout</a></li>
            </ul>
        </div>
        
        
        
        <div class="mainContainer">
            <div class="rows">
                <div id="menuInstructor" class="column">
                    <a id="link" href="/OualikoLeksiko/WordsManagerServlet">
                        <img class="container_image" src="images/words_manager.png" />
                        <br/>
                        <label>Words Manager</label>
                    </a>
                </div>
                <div id="menuStudent" class="column">
                    <a id="link" href="/OualikoLeksiko/TakeTestServlet">
                        <img class="container_image" src="images/take_test.png"/>
                        <br/>
                        <label>Take a Test</label>
                    </a>
                </div>
                <div class="column">
                    <a id="link" href="/OualikoLeksiko/HistoryServlet">
                        <img class="container_image" src="images/history.png"/>
                        <br/>
                        <label>View History</label>
                    </a>
                </div>
                <div id="menuAdministrator" class="column">
                    <a id="link" href="/OualikoLeksiko/AddUserServlet">
                        <img class="container_image" src="images/add_member.png"/>
                        <br/>
                        <label>Add Users</label>
                    </a>
                </div>
            </div>
        </div> <!-- End of main Container -->
        
        <!-- Reference JavaScript to display the appropriate elements in the Menu Bar -->
        <script src="js/displayHomePageElements.js"></script>
    </body>
</html>

---

我确信有不同的方法可以做到这一点。如果有人知道类似的例子或相关的参考资料，我会很高兴听到任何可能提供帮助的人的来信。谢谢

Answer 1

足够公平的问题。

有几种方法可以做到这一点，这实际上取决于项目的类型。您没有提及有关数据库的任何内容，因此我将从那里开始。如果您在数据库的用户表中只有用户名和密码作为字段，那么除非您存储了另一个字段，否则您无法真正区分帐户类型。因此，您需要类似帐户类型字段的内容。

您可以从这里开始了解这将如何发展。一旦您的用户表中有另一个字段，您可以使用它来区分不同的帐户类型，然后您可以创建限制内容的限制。查看您的 javascript 示例，我可以看到您只是隐藏了与特定类型的用户相关的内容。我强烈建议不要使用这种方法，因为任何人都可以检查他们正在查看的页面并修改 html/css，以便他们可以看到潜在的敏感信息。

这样做的一个好方法是根据用户帐户类型提供完全不同的 html 文件/内容。下面我将创建一个使用 JSP/JSTL 根据用户帐户类型过滤内容的快速示例。

假设我们有一个具有id,username,password,account_type 的数据库

当用户在您的登录页面上提交表单时，servlet 将检查他们输入的详细信息是否与数据库中的详细信息匹配。

登录小服务程序

@WebServlet("/Login")
public class Login extends HttpServlet {
    private static final long serialVersionUID = 1L;

    public Login() {
        super();
    }

    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //form on login page has method="post" action="Login"
        HttpSession session = (request.getSession());
        String username = request.getParameter("username");    
        String userpass = request.getParameter("userpass");  

        UserModel um = new UserModel(); 
        if(um.validate(username, userpass)){  //checks database to see if details exist/match, returns true if they do.

            String accountType = um.getAccountType(username); //gets account type of current user

            session.setAttribute("username", username);
            session.setAttribute("accountType", accountType); //set account type session variable (which we can access in our jsp)

            RequestDispatcher rd = request.getRequestDispatcher("welcome.jsp"); //go to welcome page
            rd.forward(request, response);

        }else{

            //error logic
            RequestDispatcher rd = request.getRequestDispatcher("error.jsp");
            rd.forward(request, response);
        }
    }
}

欢迎 jsp 页面

<!DOCTYPE HTML>
<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>

<html>
<head><title>welcome</title></head>
<body>

//eq is short for equal in jstl
<c:if test="${accountType eq 'admin'}">
<p>Admin content...</p>
</c:if>


<c:if test="${accountType eq 'instructor'}">
<p>Instructor content...</p>
</c:if>

<c:if test="${accountType eq 'client'}">
<p>Client content...</p>
</c:if>

</body>
</html>

服务器在发送到浏览器之前使用 jstl 运行 jsp，因此您无法检查和查看没有正确帐户类型的用户的内容...

希望这能让您了解什么是可能的。如果您有任何问题，请告诉我