如何防止HTML列表菜单项分配权限后刷新
请根据从Node.js中的会话数据读取的用户types以及基于用户types的hide html li元素来分配用户权限。 这似乎工作，但在这个意义上，这是可怕的行为。 每当我加载一个页面，所有的菜单项在被隐藏之前再次刷新/加载。 我如何防止这种行为。 那里有一些我做错了或者做法不好。 我在应用程序的每个页面上都引用了客户端代码这是我的代码，用于客户端
$(document).ready(function () { var CheckPermission = location.protocol + '//' + location.host + '/permission'; $.get(CheckPermission, function (data) { if (data == 'Student') { $("#Offer").find("#shareitem").show(); $("#Offer").find("#offeritem").hide(); $("#Offer").find("#returnitem").hide(); $("#Offer").find("#recallitem").hide(); $("#Offer").find("#renewitem").hide(); $("#Offer").find("#guestoffer").hide(); $("#Offer").find("#manageoffers").hide(); $("#Overview").hide(); $("#WithHolding").hide(); } else if (data == 'Admin') { $("#Offer").find("#shareitem").hide(); $("#Discover").hide(); } else if (data == 'Teacher') { $("#Offer").find("#shareitem").hide(); $("#Discover").hide(); } else { $("#Offer").hide(); $("#Discover").hide(); $("#Overview").hide(); $("#WithHolding").hide(); $("#myAccount").hide(); $("#Message").hide(); } }) }); 这是我在服务器端的代码
outer.get('/permission',function(req,res) { if (req.user) { var UserType = req.user.UserType; switch (UserType) { case "Admin": if ((req.isAuthenticated()) && (req.user.UserType == 'Admin')) { res.send(UserType) } break; case "Student": if ((req.isAuthenticated()) && (req.user.UserType == 'Student')) { res.send(UserType) } break; case "Teacher": if ((req.isAuthenticated()) && ((req.user.UserType == 'Admin') || (req.user.UserType == 'Professor'))) { res.send(UserType) } break; default : if (req.isAuthenticated()) { res.send(UserType) } } }else{ res.send('undefined') } });
//这是我的导航栏，其中包含菜单，并通过应用程序调用或引用每个页面
<script src="/javascript/ClientJs/HideMenus.js"></script> //This my Javascript file which contains the permission instructions(client side) <nav id="nav"class="navbar navbar-inverse navbar-fixed-top" style="z-index: 10;"> <div class="navbar-inner"> <div class="container"> <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </a> <a class="brand" href="/"><%=__('Borrowing Sys')%></a> <div class="nav-collapse collapse" aria-expanded="true"> <ul id="menu"class="nav"> <li id="home"><a href="/"><%=__('Home')%></a></li> <li id="Offer" class="dropdown"> <a href="/#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><%=__('Offer')%><span class="caret"></span></a> <ul class="dropdown-menu" role="menu"> <li id="offeritem"><a href="/itemoffers"><%=__('Offer Item')%></a></li> <li id="recallitem"><a href="/recallitem"><%=__('Recall Item')%></a></li> <li id="renewitem"><a href="/renewitem"><%=__('Renew Item')%></a></li> <li id="returnitem"><a href="/returnitem"><%=__('Return Item')%></a></li> <li id="odivider"class="divider"></li> <li id="guestoffer"><a href="/guestitemoffers"><%=__('Guest Offer')%></a></li> <li id="shareitem"><a href="/shareitem"><%=__('Share Item')%></a></li> <li id="manageoffers"><a href="/manage/manageoffers"><%=__('Manage Offers')%></a></li> </ul> </li> <li id="Discover"class="dropdown"> <a href="/#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><%=__('Discover Items')%><span class="caret"></span></a> <ul class="dropdown-menu" role="menu"> <li><a href="/discoverymap"><%=__('Discovery Map')%></a></li> <li><a href="/Asktobuy"><%=__('Send a Request')%></a></li> <li><a href="/shareditems/availableoffer"><%=__('Available Items')%></a> </li> </ul> </li> <li id="Message" class="dropdown"> <a href="/#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><%=__('Messages')%><span class="caret"></span></a> <ul class="dropdown-menu" role="menu"> <li><a href="/messages"><%=__('Private Messages')%></a></li> </ul> </li> <li id="Overview"class="dropdown"> <a href="/#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><%=__('System Overview')%><span class="caret"></span></a> <ul class="dropdown-menu" role="menu"> <li><a href="/analysis"><%=__('Data Analysis')%></a></li> <li><a href="/activitylog"><%=__('User Activity Logs')%></a></li> <li class="divider"></li> <li><a href="/manage/removeoffers"><%=__('Remove Offers')%></a></li> <li><a href="/checkrequest"><%=__('Students Request')%></a></li> </ul> </li> <li id="myAccount" class="dropdown"> <a href="/#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><%=__('My Account')%><span class="caret"></span></a> <ul class="dropdown-menu" role="menu"> <li id="youroffers"><a href="/offers/myoffers"><%=__('Your Offers')%></a></li> <li id="reservations"><a href="/checkreservations"><%=__('Reservations')%></a></li> <li id="divider"class="divider"></li> <li id="profile"><a href="/user"><%=__('My Profile')%></a></li> <li id="invite"><a href="/InviteFriend"><%=__('Invite Friend')%></a></li> <li ><a href="/logout"><%=__('Log out')%></a></li> </ul> </li> </ul> <!-- add search form --> <div id="WithHolding" class="col-sm-3 col-md-3 pull-right"> <form class="navbar-form" role="search"> <div class="input-group"> <input type="text" class="form-control" placeholder="<%=__('Student ID')%>" Id="SearchStudent" name="SearchStudent"> <button id="Search" name="Search" class="btn btn-primary" type="button"><%=__('Check Clearance')%> </button> </div> </form> </div> </div> </div> </div> </nav> This is a typical example of how i have referenced the NavBar on all pages. This is the overall structure of the design <!DOCTYPE html> <html lang="en"> <% include ./MyLayout/header %> <body> <% include ./MyLayout/navbar %> <script src="/javascript/ClientJs/RenewItem.js"></script> <div class="container"> <div class="row-fluid"> <div id="content" class="span12"> <div class="row-fluid"> <form class="form-horizontal span12" method="post" action="RenewItems"> <fieldset> <legend><%=__('Renew Item')%> <h6 style="color: #006dcc"><%=__('Extend/Renew item given to student')%></h6> </legend> <br> <% if(SuccessMessage.length>0){ %> <div class="row-fluid status-bar"> <div class="span12"> <div class="alert alert-success alert-dismissible" id="alertmessage" role="alert"> <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button> <strong><%=__('Success !')%></strong><%= SuccessMessage %> </div> </div> </div> <% } %> <% if(ErrorMessage.length>0){ %> <div class="row-fluid status-bar"> <div class="span12"> <div class="alert alert-danger alert-dismissible" id="alertmessage" role="alert"> <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button> <strong><%=__('Error!')%></strong> <%= ErrorMessage %> </div> </div> </div> <% } %> <div class="row-fluid"> <div class="span8"> <div class="control-group"> <label for="BookingNo" class="control-label"><%=__('Booking Number:')%></label> <div class="controls"> <input id="BookingNumber" name="BookingNumber" type="text" value="" required="" title="<%=__('Please enter Booking number for the transaction')%>" placeholder="<%=__('Booking Number')%>"> </div> </div> <div class="control-group"> <label for="ItemName" class="control-label"><%=__('Item Name:')%></label> <div class="controls"> <input type="text" id="ItemName" name="ItemName" value="" required="" title="<%=__('Please enter Item Name')%>" placeholder="<%=__('Item Name')%>"> </div> </div> <div class="control-group"> <label for="StudentID" class="control-label"><%=__('Student/Guest ID:')%></label> <div class="controls"> <input id="StudentID" name="StudentID" type="text" value="" readonly required="" title="<%=__('Please enter student matriculation ID')%>" placeholder="<%=__('Matriculation Number/Guest ID')%>"> </div> </div> <div class="control-group"> <label for="ItemNumber" class="control-label"><%=__('Item Number:')%></label> <div class="controls"> <input id="ItemNumber" name="ItemNumber" type="text" value="" readonly required="" title="<%=__('Please enter Item Number')%>" placeholder="<%=__('Item Number')%>"> </div> </div> <div class="control-group"> <label for="EmailID" class="control-label"><%=__('Student/Guest Email ID:')%></label> <div class="controls"> <input type="text" id="StudentEmail" name="StudentEmail" value="" placeholder="<%=__('Student/Guest Email')%>" readonly required="" title="<%=__('Student/Guest Email ID cannot be empty')%>"> </div> </div> <div class="control-group"> <label for="ReturnDate" class="control-label"><%=__('Old Return Date:')%></label> <div class="controls"> <input id="OldReturnDate" name="OldReturnDate" type="text" value="" readonly placeholder="<%=__('DD-MM-YYYY')%>" required="" title="<%=__('Please search for item')%>"> </div> </div> <div class="control-group"> <label for="Remarks" class="control-label"><%=__('Duration:')%></label> <div class="controls"> <select Id="Duration" name="Duration" class="form-control"> <option value="1 week"><%=__('1 week')%></option> <option value="2 weeks"><%=__('2 weeks')%></option> <option value="3 weeks"><%=__('3 weeks')%></option> <option value="4 weeks"><%=__('4 weeks')%></option> </select> </div> </div> <div class="control-group"> <label for="ReturnDate" class="control-label"><%=__('New Return Date:')%></label> <div class="controls"> <input id="ReturnDate" name="ReturnDate" type="text" value="" placeholder="<%=__('DD-MM-YYYY')%>" readonly required="" title="<%=__('Please specify duration of extension')%>"> </div> </div> <div class="control-group"> <label for="Remarks" class="control-label"><%=__('Remarks:')%></label> <div class="controls"> <textarea id="Remarks" name="Remarks" style="width: 70%;" rows="4" required="" title="<%=__('Any remarks regarding the renewal of an item')%>"></textarea> </div> </div> </div> </div> </fieldset> <div class="form-actions"> <button type="reset" class="btn btn-default"><%=__('Cancel')%></button> <button type="submit" class="btn btn-primary"><%=__('Renew')%></button> </div> </form> </div> </div> </div> </div> </body> <% include ./MyLayout/footer_bottom%> </html>
什么先把所有东西都藏起来 假设你的菜单项被封装在div或者如果菜单项在OL/UL ，你可以在加载页面时设置它隐藏：
.menu-wrapper{ display:none; } $(document).ready(function () { var CheckPermission = location.protocol + '//' + location.host + '/permission'; $.get(CheckPermission, function (data) { //your stuff }).always(function(){ $(".menu-wrapper").show();//this will toggle display:none }); });
你注意到这是因为从服务器得到响应的延迟。
All Menus Loaded First > Wait Few Seconds > Server Responds > Hide Menus
为了避免这种情况，在初始加载期间隐藏菜单并在获得响应后显示它们将是正确的方法。
顺便说一句，我不会喜欢在客户端显示和隐藏菜单项。 最好的select是从服务器获取允许的菜单项列表，并在客户端渲染。
请记住，用户可以更改CSS样式来查看隐藏菜单，并且可以执行不允许的操作，除非您的服务器validation了每个请求。
通过添加css类来更改您的html以隐藏模式呈现菜单。
.menu-wrapper { display:none; } <ul id="menu" class="nav"> <li id="home"class="hidden-menu"><a href="/"><%=__('Home')%></a></li> <li id="Offer" class="dropdown menu-wrapper"> </li> <li id="Discover" class="dropdown menu-wrapper"> </li> <li id="Message" class="dropdown menu-wrapper"> </li> <li id="Overview" class="dropdown menu-wrapper"> </li> <li id="myAccount" class="dropdown menu-wrapper"> </li> </ul>
然后在从服务器获得权限后，启用节点。
$(document).ready(function () { var CheckPermission = location.protocol + '//' + location.host + '/permission'; $.get(CheckPermission, function (data) { // If the menu should be shown then remove the css class if(data === 'Admin') { $("#Discover").removeClass('hidden-menu'); } }) });