Тема веб-приложения о ролях пользователя - PullRequest
0 голосов
/ 25 апреля 2018

В настоящее время я работаю над веб-приложением, использующим Glass-Fish и Servlet, хотя меня немного смущает логическая концепция о том, как обрабатывать различный контент HTML для каждой роли пользователя, такой как Admin, Instructor и Client.Давайте предположим, что у нас есть эти роли в наших системах, и все мы можем войти в систему и использовать имя пользователя и пароль, которые были бы проверены, если бы они существовали в базе данных, чтобы они могли получить доступ к веб-приложению.


Чтобы дать вам представление, посмотрите пример ниже, над которым я сейчас работаю.Здесь 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 голосов
/ 25 апреля 2018

достаточно справедливый вопрос.

Есть несколько способов сделать это, и это действительно зависит от типа проекта. Вы ничего не упоминаете о базе данных, поэтому я начну с нее. Если у вас есть только имя пользователя и пароль в качестве полей в таблице пользователей в вашей базе данных, вы не сможете различить тип учетной записи, если не сохраните другое поле. Так что вам нужно что-то вроде поля типа учетной записи.

Отсюда вы можете начать видеть, как это закончится. Если у вас есть другое поле в пользовательской таблице, которое вы можете использовать для различения разных типов учетных записей, вы можете создать ограничения для ограничения содержимого. Глядя на ваш пример JavaScript, я вижу, что вы просто скрываете контент, относящийся к определенному типу пользователей. Я настоятельно рекомендую не использовать этот подход, потому что любой может просто просмотреть страницу, которую он просматривает, и изменить html / css, чтобы он мог видеть потенциально конфиденциальную информацию.

Хороший способ сделать это - обслуживать совершенно другие html-файлы / контент в зависимости от типа учетной записи пользователя. Ниже я создам быстрый пример использования JSP / JSTL для фильтрации содержимого в зависимости от типа учетной записи пользователя.

Допустим, у нас есть база данных с id, именем пользователя, паролем, account_type

Когда пользователь отправляет форму на странице входа в систему, сервлет проверит, совпадают ли введенные данные с данными в базе данных.

Логин сервлет

@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>

Сервер запускает jsp с jstl перед отправкой в ​​браузер, поэтому вы не можете просматривать и просматривать содержимое пользователя, у которого нет нужного типа учетной записи ...

Надеюсь, это даст вам представление о том, что возможно. Дайте мне знать, если у вас есть вопросы

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...