USER ROLES上的Web App主题

时间：2018-04-25 14:25:56

标签： javascript servlets web-applications user-roles

我目前正在使用Glass-Fish和Servlet开发Web应用程序，尽管我对如何处理每个用户角色（如Admin，Instructor和Client）的不同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>

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

1 个答案:

答案 0 :(得分：0)

公平的问题。

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

从这里开始，您可以看到这将如何发挥作用。在用户表中有另一个字段可用于区分不同的帐户类型后，您可以创建限制内容的限制。看看你的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，因此您无法检查并查看没有正确帐户类型的用户的内容...

希望能让您了解可行的方法。如果您有疑问，请告诉我

相关问题
最新问题