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

Posted 2023-05-07

【中文标题】如何根据数据库值显示设置访问权限和显示/隐藏 div

【英文标题】：How to display set access permission & display /hide div based on database values

【发布时间】：2017-11-04 21:31:34

【问题描述】：

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

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

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

【问题讨论】：

所以，有一个每个人都可以访问的页面，但是，您想为某些用户禁用某些功能，是吗？

是的，有一个用户登录和管理员登录分开

您不能简单地使用样式隐藏 div。您必须使用某种服务器端语言，例如 php，才能检查凭据并将适当的 html 信息发送给用户。

我使用 wcf rest 作为后端

拒绝投票并想知道赞成票：第一条评论比问题的三段更能说明问题。也不用自己解决问题。

【参考方案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>

【讨论】：

有趣，但我不认为这是一个超级可扩展的解决方案，因为如果分配了更多角色，您会不断地将每个角色作为具有自己单独切换的 css 类传递。不要误会我的意思，考虑到 OP 的初始问题（并且您已经正确识别了安全问题），这是一个可行的解决方案，但是发回仅包含特定用户可以看到的 div 的 JSON 有效负载肯定会更有效并且只在客户端渲染它们——当它们永远不会被隐藏时手动隐藏它们是浪费 DOM 操作/大小

@Alex 公平点。我将其作为一种方法提供，但需要注意安全问题。此外，元素在第一次绘制时被隐藏，并在适当时显示。如果有污染的 DOM 是一个问题，请在相对类的隐藏元素上使用 remove 等。