首頁猿問如何根據(jù)登錄用戶角色禁用 HTML...

如何根據(jù)登錄用戶角色禁用 HTML 文檔的某些元素？

JavaScript

海綿寶寶撒 2023-05-19 15:02:12

我正在為一小部分用戶制作一個文件查看網(wǎng)站，我有一個登錄頁面，目前我的網(wǎng)站是使用 Firebase 托管和驗證的。我試圖做到這一點，以便當(dāng) A 登錄時，他們可以訪問文件夾 1、文件夾 2 和管理控制臺，但不能訪問文件夾 3-8，但是當(dāng) B 登錄時，他們可以訪問文件夾 3，等等。我想不出任何方法來做到這一點，我已經(jīng)搜索過谷歌，但沒有快樂！我沒有預(yù)期或?qū)嶋H結(jié)果，因為我想不出任何方法來做到這一點，因此我沒有錯誤消息。例如，我嘗試使用 div 進行一些操作，然后使用 js 來判斷用戶是否具有此角色，然后顯示此信息，否則不要顯示目前這是我測試不同方法的方法，如果用戶登錄，它應(yīng)該顯示登錄的 div，否則它應(yīng)該顯示注銷的 div。<!DOCTYPE html><html> <head> <title>D-Skinner - Welcome</title>  <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>  <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條經(jīng)驗獲得超3個贊

正如我在評論中所說，您擁有所需的一切（大部分情況下），您只需要添加“角色”......

你可以用很多方法來做到這一點（通常我會查看我正在使用的選項并決定特定項目的最佳方法 - 我通常最終使用 CLASS 而不是 ID - 個人偏好并取決于所有參與了）。在你的情況下，我遵循了你的代碼風(fēng)格（這很好，雖然有更短的方法來做事...... - 你會隨著時間的推移學(xué)習(xí)?。?/p>

因此，僅重用 D-skinner.html 的主體（其余代碼不影響這一點），您將得到類似的東西：

<body>

<p>stuff for Folder 1</p>

</div>

<p>stuff for Folder 2</p>

</div>

<p>stuff for Folder 3</p>

</div>

<p>stuff for Admin Console</p>

</div>

<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>

<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>

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>

同樣，您有基本概念 - 您只需要通過角色來完成它（并且由于您從未包括如何分配用戶和角色，您將需要修改上面的示例以適應(yīng)您正在做的事情）。

反對回復(fù) 2023-05-19

森林海

TA貢獻2011條經(jīng)驗獲得超2個贊

我假設(shè)您知道每個人都可以訪問您的隱藏信息。

如果這不是什么秘密，那么您最好進行客戶端實施。但是，如果它是某種敏感數(shù)據(jù)，您將在服務(wù)器端實現(xiàn)所有安全和過濾。

所以我會在服務(wù)器上放置授權(quán)和用戶驗證。前端只會呈現(xiàn)來自服務(wù)器的信息。

反對回復(fù) 2023-05-19

2 回答
0 關(guān)注
150 瀏覽

關(guān)注

添加回答

舉報

0/150

提交

取消

使用 Ctrl+D 可將網(wǎng)站添加到書簽

微信客服

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學(xué)習(xí)伙伴

公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號

第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

熱搜

最近搜索清空

如何根據(jù)登錄用戶角色禁用 HTML 文檔的某些元素？

如何根據(jù)登錄用戶角色禁用 HTML 文檔的某些元素？

2 回答

添加回答

如何根據(jù)登錄用戶角色禁用 HTML 文檔的某些元素？

如何根據(jù)登錄用戶角色禁用 HTML 文檔的某些元素？