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

Question

我目前正在开发一个使用Glass和Servlet的web应用程序，尽管我对如何为每个用户角色处理不同的HTML内容的逻辑概念感到有点困惑，比如管理人员、指导员和客户端。让我们考虑一下，我们的系统中有这些角色，并且所有这些角色都能够登录并使用用户名和密码，如果数据库中存在这些角色，将被检查，这样它们就能够访问web应用程序。

为了给你一个想法，见下面的例子，我正在做的工作。这里的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、用户名、密码、account_type的数据库

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

登录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，因此您无法检查和查看没有正确帐户类型的用户的内容.

希望能让你知道什么是可能的。如果你有问题请告诉我