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

Question

我想设置访问权限页面，其中将权限设置为仅查看选定的 div，例如：

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

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

Answer 1

在我们进入答案之前，我必须提到安全性。您可能知道，但是为了将来的读者受益……您不能仅仅依靠隐藏或不生成 HTML 元素来限制用户访问。为什么 - 因为当您的表单向服务器提交数据时，可以使用 Fiddler 等简单工具观察到这一点。如果您只是在网页上隐藏重要输入但仍然提交它们，那么顽皮的用户可能会使用 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() 函数时，它会查找具有给定用户类型类的所有元素并使它们可见。

编辑：请参阅下面的工作 sn-p。虽然人为的想法很明确，但我希望。要考虑的一点是使用通用标记类来指示适当的元素应该参与显示/隐藏操作。如果您有任何疑问，请告诉我。

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