How to display permissions for a set and show / hide div based on database values

Question

I want to set an access permissions page in which the permission setting for the user will be displayed only for individual sections, for example:

There are 5 flags on the admin page and 5 sections on the user page, if checking 3 divs the user should get only 3 divs. I map the user’s location and the client’s location and the username for setting access rights and how to show / hide the div in the user page based on the choice of checkbox or database values?

There is a separate username and administrator password separately. The administrator will disable certain features for specific users. Using wcf rest and sql server as a backend.

Answer 1

Before moving on to the answer, I must mention security. You probably know, but beneficial for future readers ... you should not rely on simply hiding or not creating HTML elements as a means of restricting user access. Why - because when your form submits data to the server, this can be observed with simple tools like Fiddlr. If you just hide important inputs on a web page, but send them anyway, then a mischievous user can use something like Postman to edit and send dodgy values ​​to your server. INCLUDING for fields that were not visible on the form. Even if you have server-side code to restrict HTML generation for limited input, if the user can see the full submission form, or, more likely, if your API is self-descriptive or well-documented, then they can start the mail manager and start sending your server all sorts of available data.

For this reason, it is very important that you re-check the user, your role and the right to change the server on each interaction. Sermon.

Assuming that the above protection is installed, the path forward is relatively simple. In your HTML, you assign classes to the elements to be displayed / hidden, and you send the variable from the server to dictate their hidden or visible state.

For example, let's say you have two user groups called usrNormal and usrAdmin. You may have an input defined as:

<input type="text" class="usrNormal usrAdmin" name="somedata" style="display:hidden;"></input> <input type="text" class="usrAdmin" name="admindata" style="display:hidden;"></input> <div class="usrNormal usrAdmin" style="display:hidden;">Some important info here....</div> <div class="usrAdmin" style="display:hidden;">Some admin-only info here.... </div> 

The key to this method is to set the css class="usrNormal usrAdmin"

And the accompanying JS function:

var usrType = "usrNormal"; function protect() { $("." + usrType).show(); } protect();

I used jQuery here in a line inside a function, you can use simple JS to achieve the same. We launch a page with hidden important inputs, divs and other html elements. The usrType parameter comes from the server, and when the protect () function is called, it finds all the elements with the given user type class and makes them visible.

EDIT: see working snippet below. Although the far-fetched idea is clear, I hope. One point to consider is the use of a generic marker class to indicate that the relevant elements should be involved in the show / hide operation. Let me know if you have any questions.

 $( document ).ready(function() { // Important: wait for the document dom to be ready // get the value of the server access variable - simulated by the radio buttons in this case // var access = <you would put your server value here !> var access = ".usrNormal"; setAccess(access); // next part is just to let you play. $('.serverVal').on('change', function(e){ setAccess($(this).val()); }) // key function - this will show pr hide based on classes. function setAccess(accessVal) { // next line finds all elements with class including 'usrAccess' and shows if they have the request class or otherwise hides. $(".usrAccess").each( function() { var ele = $(this); // readability showHide(ele, accessVal); }) } // show or hide the element based on class function showHide(ele, cls){ if ( ele.is(cls) ){ // pay attention - this uses the jquery 'is' feature. ele.show(); } else { ele.hide(); } } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form name="form1"> <p> <span>This selection simulates the value passed from the server. When changed the elements with the matching classes are shown or hidden.</span><br /> </p> <p> <span> <input type="radio" class="serverVal" id="usrType1" name="usrType" value=".usrNormal" checked="1" /> <label for="usrType1"> Normal User only</label> </span> <span> <input type="radio" class="serverVal" id="usrType2" name="usrType" value=".usrAdmin"/> <label for="usrType2"> Admin User only </label> </span> <span> <input type="radio" class="serverVal" id="usrType3" name="usrType" value=".usrAdmin, .usrNormal" name="usrType3"/> <label for="usrType3"> Both </label><br /> </span> </p> <hr> <p class="usrNormal usrAccess" style="display:none;"> <label for="somedata">Normal only</label> <input type="text" name="somedata" /> </p> <p class="usrAdmin usrAccess" style="display:none;"> <label for="admindata1">Admin only</label> <input type="text" class="usrAdmin" name="admindata1" /> </p> <p class="usrNormal usrAccess" style="display:none;"> <label for="someinfo">Info 1</label> <textarea id="someinfo">This textare is visible to normal users...</textarea> </p> <p class="usrAdmin usrAccess" style="display:none;"> <label for="admininfo">Info 2</label> <textarea id="admininfo">This textare is visible to only Admin users...</textarea> </p> </form>