我正在为一小部分用户制作一个文件查看网站，我有一个登录页面，目前我的网站是使用 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 回答
白板的微信
TA贡献1883条经验 获得超3个赞
正如我在评论中所说，您拥有所需的一切（大部分情况下），您只需要添加“角色”......
你可以用很多方法来做到这一点（通常我会查看我正在使用的选项并决定特定项目的最佳方法 - 我通常最终使用 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>
同样，您有基本概念 - 您只需要通过角色来完成它（并且由于您从未包括如何分配用户和角色，您将需要修改上面的示例以适应您正在做的事情）。
森林海
TA贡献2011条经验 获得超2个赞
我假设您知道每个人都可以访问您的隐藏信息。
如果这不是什么秘密，那么您最好进行客户端实施。但是，如果它是某种敏感数据，您将在服务器端实现所有安全和过滤。
所以我会在服务器上放置授权和用户验证。前端只会呈现来自服务器的信息。
添加回答
举报
0/150
提交
取消