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

Question

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

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

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

Answer 1

在我们进入答案之前，我必须提到安全性。您可能知道，但为了将来的读者受益……您不能依赖简单地隐藏或不生成 HTML 元素作为限制用户访问的手段。为什么 - 因为当您的表单向服务器提交数据时，可以使用 Fiddlr 等简单工具观察到这一点。如果您只是在网页上隐藏重要输入但仍然提交它们，那么恶作剧的用户可能会使用类似 Postman 的东西来编辑和向您的服务器提交狡猾的值，包括表单上不可见的字段。即使您有一些服务器端代码来限制为受限输入生成 HTML，如果用户能够看到完整的表单提交，或者更有可能如果您的 API 是 self 描述的或有详细记录的，那么他们就可以启动 Postman 并开始向您的服务器发送各种不正常的数据。

因此，您必须在每次交互时重新验证用户、他们的 Angular 色以及他们在服务器上进行修改的权利。布道结束。

假设上述保护措施到位，那么前进的道路就相对简单了。在您的 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"; 功能保护(){ $("."+ usrType).show(); } 保护();

我在函数内的行中使用了 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>