如何根据数据库值显示设置访问权限和显示/隐藏div

Question

我想设置访问权限页面,其中设置用户的权限仅查看选定的div,例如:

管理页面中有5个复选框,用户页面中有5个div如果检查3 div用户必须只获得3 div我映射用户位置和客户端位置和用户名以设置访问权限以及如何在用户页面中显示/隐藏div基于复选框选择或数据库值？

分别有用户登录和管理员登录.管理员将禁用某些用户的某些功能.使用wcf rest和sql server作为后端.

Answer 1

在我们得到答案之前,我必须提到安全性.您可能知道,但是为了未来的读者受益......您不能仅仅依赖于隐藏或不生成HTML元素作为限制用户访问的手段.为什么 - 因为当您的表单向服务器提交数据时,可以使用像Fiddlr这样的简单工具来观察.如果您只是隐藏网页上的重要输入但仍然提交它们,那么恶作剧的用户可以使用像Postman这样的东西编辑并向您的服务器提交狡猾的值包括在表单上看不到的字段.即使您有一些服务器端代码来限制受限输入的HTML生成,如果用户能够看到完整的表单提交,或者如果您的API是自我描述或有充分记录的话,则更有可能启动Postman并开始向您的服务器发送所有方式的数据.

因此,在每次交互时重新验证用户,他们的角色以及在服务器上进行修改的权利至关重要.讲道结束.

假设上述保护已经到位,那么前进的方向相对简单.在HTML中,您将类分配给需要显示/隐藏的元素,并从服务器发送变量以指示其隐藏或可见状态.

例如,假设您有两组用户名为usrNormal和usrAdmin.您可能将输入定义为:

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

这种技术的关键是css类设置 class="usrNormal usrAdmin"

随附的JS功能是:

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

我在函数内部使用了JQuery,你可以用普通的JS来实现同样的功能.我们启动页面,隐藏重要的输入,div和其他html元素.usrType设置来自服务器,当调用protect()函数时,它会查找具有给定用户类型类的所有元素并使它们可见.

编辑:请参阅下面的工作片段.我希望尽管这个想法很明确.需要考虑的一点是使用通用标记类来指示适当的元素应该参与显示/隐藏操作.如果您有任何疑问,请告诉我.

$( 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>