如何根据登录用户角色禁用 HTML 文档的某些元素？
我正在为一小部分用户制作一个文件查看网站，我有一个登录页面，目前我的网站是使用 Firebase 托管和验证的。
我试图做到这一点，以便当 A 登录时，他们可以访问文件夹 1、文件夹 2 和管理控制台，但不能访问文件夹 3-8，但是当 B 登录时，他们可以访问文件夹 3，等等。
我想不出任何方法来做到这一点，我已经搜索过谷歌，但没有快乐！我没有预期或实际结果，因为我想不出任何方法来做到这一点，因此我没有错误消息。
例如，我尝试使用 div 进行一些操作，然后使用 js 来判断用户是否具有此角色，然后显示此信息，否则不要显示
目前这是我测试不同方法的方法，如果用户登录，它应该显示登录的 div，否则它应该显示注销的 div。
<!DOCTYPE html>
<html>
<head>
<title>D-Skinner - Welcome</title>
<!-- Adds Firebase Things -->
<script src="/__/firebase/7.13.2/firebase-app.js"></script>
<script src="/__/firebase/7.14.5/firebase-analytics.js"></script>
<script src="/__/firebase/7.13.2/firebase-auth.js"></script>
<script src="/__/firebase/init.js"></script>
<!-- Adds the Auth Script-->
<script src="/auth.js"></script>
<style>
body {
text-align: center;
}
.Logged_In {
visibility: hidden;
}
.Logged_Out {
visibility: hidden;
}
</style>
</head>
<body>
<script>
firebase.auth().onAuthStateChanged(function(user) {
if (user) {
// If user is logged in
var displayName = user.displayName;
var email = user.email;
var emailVerified = user.emailVerified;
document.getElementById("Logged_In").style.visibility = "show"
} else {
document.getElementById("Logged_Out").style.visibility = "show"
}
});
</script>
<div id="Logged_Out">
<h1>Please Login to D-Skinner Portal</h1>
<p>We understand that you want access to Portal, but we need your username and password, otherwise we can't let you in, sorry!</p>
<p>An alert has been sent to the D-Skinner team to alert them of this incident (just in case this was an accident), we will continue to monitor this IP Address and MAC Address for 1 hour to make sure that this isn't an attack.</p>
</div>
我会在这个问题的底部留下一个临时登录名供人们测试（此登录名有效期至2020年10月24日）
基本上，js fimd 如果用户已登录，如果是，他们有什么角色，如果他们有某些角色，则显示某些 div 元素。
海绵宝宝撒2回答
-
白板的微信
正如我在评论中所说，您拥有所需的一切（大部分情况下），您只需要添加“角色”......你可以用很多方法来做到这一点（通常我会查看我正在使用的选项并决定特定项目的最佳方法 - 我通常最终使用 CLASS 而不是 ID - 个人偏好并取决于所有参与了）。在你的情况下，我遵循了你的代码风格（这很好，虽然有更短的方法来做事...... - 你会随着时间的推移学习！）因此，仅重用 D-skinner.html 的主体（其余代码不影响这一点），您将得到类似的东西：<body> <div id="Folder1" style="visibility:hidden;"> <p>stuff for Folder 1</p> </div> <div id="Folder2" style="visibility:hidden;"> <p>stuff for Folder 2</p> </div> <div id="Folder3" style="visibility:hidden;"> <p>stuff for Folder 3</p> </div> <div id="AdminConsole" style="visibility:hidden;"> <p>stuff for Admin Console</p> </div> <div id="Logged_Out"> <h1>Please Login to D-Skinner Portal</h1> <p>We understand that you want access to Portal, but we need your username and password, otherwise we can't let you in, sorry!</p> <p>An alert has been sent to the D-Skinner team to alert them of this incident (just in case this was an accident), we will continue to monitor this IP Address and MAC Address for 1 hour to make sure that this isn't an attack.</p> </div> <div id="Logged_In"> <h1>D-Skinner - Portal</h1> <p>We appreciate your beta testing, your login has been successful, please check with your beta co-ordinator to complete your beta.</p> </div> <script> firebase.auth().onAuthStateChanged(function(user) { if (user) { // you already know this, but here is a great way to test this console.log("user is now ", user); // now in your console (differs by browser - internet search to see how to open yours) you will see the user info in an object. // If user is logged in var displayName = user.displayName; var email = user.email; var emailVerified = user.emailVerified; // here you can verify everything if you like..... console.log("displayName is ", displayName); // I'll only include this one -you can do others as needed document.getElementById("Logged_In").style.visibility = "show" // HERE YOU TEST AND DO 'ROLE' THINGS (same as you did 'user'...) // you did not include any way you are determining which role so I have to guess from the data you did provide..... if(displayName === 'Person A'){ console.log("displayName ", displayName, " MATCHED here"); // you can do all the 'what they can see' here // (there are easier and better ways, but this is simple and follows your style of coding) document.getElementById("Folder1").style.visibility = "show"; document.getElementById("Folder2").style.visibility = "show"; document.getElementById("AdminConsole").style.visibility = "show"; } if(displayName === 'Person B'){ console.log("displayName ", displayName, " MATCHED here"); // you can do all the 'what they can see' here document.getElementById("Folder3").style.visibility = "show"; // etc } } else { console.log(" NO USER - showing Logged_Out div"); document.getElementById("Logged_Out").style.visibility = "show" } }); </script></body>同样，您有基本概念 - 您只需要通过角色来完成它（并且由于您从未包括如何分配用户和角色，您将需要修改上面的示例以适应您正在做的事情）。 -
森林海
我假设您知道每个人都可以访问您的隐藏信息。如果这不是什么秘密，那么您最好进行客户端实施。但是，如果它是某种敏感数据，您将在服务器端实现所有安全和过滤。所以我会在服务器上放置授权和用户验证。前端只会呈现来自服务器的信息。
随时随地看视频慕课网APP
相关分类
JavaScript