Javascript 如何根据登录用户角色禁用HTML文档的某些元素？
我正在为一小部分用户创建一个文件屏蔽网站，我有一个登录页面，目前我的网站使用Firebase托管和验证 我正在尝试这样做，以便当人员A登录时，他们可以访问文件夹1、文件夹2和管理控制台，但不能访问文件夹3-8，但当人员B登录时，他们可以访问文件夹3，等等 我想不出任何方法来做到这一点，我已经搜索了谷歌，但没有乐趣！ 我没有预期的或实际的结果，因为我想不出任何方法来做到这一点，因此我没有错误消息 我尝试了一些使用divs的方法，例如，然后使用js，如果用户有这个角色，那么就显示这个else 目前，这就是我测试不同方法的方法，如果用户登录，它应该显示logged-in div，否则它应该显示logged-out divJavascript 如何根据登录用户角色禁用HTML文档的某些元素？,javascript,html,firebase,firebase-authentication,Javascript,Html,Firebase,Firebase Authentication,我正在为一小部分用户创建一个文件屏蔽网站，我有一个登录页面，目前我的网站使用Firebase托管和验证 我正在尝试这样做，以便当人员A登录时，他们可以访问文件夹1、文件夹2和管理控制台，但不能访问文件夹3-8，但当人员B登录时，他们可以访问文件夹3，等等 我想不出任何方法来做到这一点，我已经搜索了谷歌，但没有乐趣！ 我没有预期的或实际的结果，因为我想不出任何方法来做到这一点，因此我没有错误消息 我尝试了一些使用divs的方法，例如，然后使用js，如果用户有这个角色，那么就显示这个else 目前，
D-斯金纳-欢迎
身体{
文本对齐：居中；
}
.已登录{
可见性：隐藏；
}
.注销{
可见性：隐藏；
}
firebase.auth（）.onAuthStateChanged（函数（用户）{
如果（用户）{
//如果用户已登录
var displayName=user.displayName；
var email=user.email；
var emailVerified=user.emailVerified；
document.getElementById（“已登录”）.style.visibility=“显示”
}否则{
document.getElementById（“注销”）.style.visibility=“显示”
}
});
请登录到D-Skinner门户
我们知道您希望访问门户，但我们需要您的用户名和密码，否则我们无法让您进入，抱歉
已向D-Skinner团队发送警报，提醒他们这起事件（以防发生意外），我们将继续监视此IP地址和MAC地址1小时，以确保这不是攻击
D-斯金纳-门户
我们感谢您的beta测试，您的登录已成功，请与您的beta协调员联系以完成您的beta测试
D-Skinner-登录
身体{
背景图片：url（'assets/login_page_background.jpg'）；
颜色：白色；
文本对齐：居中；
}
登录
电子邮件地址（必填）
密码（必需）
我忘记密码了
登录
需要门户登录吗？
仅允许门户用户访问此服务。如果您没有门户用户名和密码，则尝试访问此服务可能是违法行为
了解有关门户的更多信息
函数登录（）{
//获取输入框中的值（输入的文本）。
const email=document.getElementById（“fb_email”）.value
const password=document.getElementById（“fb_密码”）.value
//获取值并尝试让用户登录。
firebase.auth（）{
console.warn（“error.message\n error.code”）
}).然后（函数（）{
登录后（）
})
}
_login（）之后的函数{
//用户登录时会发生什么情况。
window.location.href=“/D-skinner.html”
}
D-斯金纳-欢迎
身体{
文本对齐：居中；
}
.已登录{
可见性：隐藏；
}
.注销{
可见性：隐藏；
}
firebase.auth（）.onAuthStateChanged（函数（用户）{
如果（用户）{
//如果用户已登录
var displayName=user.displayName；
var email=user.email；
var emailVerified=user.emailVerified；
document.getElementById（“已登录”）.style.visibility=“显示”
}否则{
document.getElementById（“注销”）.style.visibility=“显示”
}
});
请登录到D-Skinner门户
我们知道您希望访问门户，但我们需要您的用户名和密码，否则我们无法让您进入，抱歉
已向D-Skinner团队发送警报，提醒他们这起事件（以防发生意外），我们将继续监视此IP地址和MAC地址1小时，以确保这不是攻击
D-斯金纳-门户
我们感谢您的beta测试，您的登录已成功，请与您的beta协调员联系以完成您的beta测试
谢谢你的帮助 您可以在
用户角色角色<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>