Question

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

管理页面中有5个复选框，用户页面中有5个div如果检查3 div用户必须只获得3 div我正在映射userlocation＆amp;客户所在地＆amp;用于设置访问权限的用户名以及如何根据复选框选择或数据库值显示/隐藏用户页面中的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>

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

1 个答案: