![](/img/trans.png)
[英]What is the correct way to change Navbar values in React based on if user is logged in?
[英]What are the ways to show different navbar based on if the user logged or not?
我想知道根據用戶是否登錄這一事實來顯示不同導航欄的最佳方法是什么。
我想了幾種方法來做到這一點:
一種方法是在 HTML 文件中制作兩個導航欄,並使用 CSS 制作一個顯示塊,另一個不顯示,並使用 js 在它們之間切換。
或者另一種方法可以使用PHP“if語句”......
還有哪些方式? 而且我知道有很多方法,但最簡單的方法是什么,還有干凈的代碼。
謝謝你們 :)。
如果我正確理解你的問題。 我完全不鼓勵您使用基於 javascript/css 的隱藏/顯示,一個很好的理由是安全性,如果有人通過您的代碼可以輕松取消隱藏您的導航欄。
如果您只想在用戶登錄時顯示導航欄,就會出現這種情況。
如果您正在編寫勞倫斯的評論中提到的 PHP,請遵循 MVC 模式並將您的導航欄創建為視圖,並僅在用戶登錄時包含它。 PHP 是一種服務器端語言,如果logged-in
條件未滿。
使用 PHP 進行服務器端渲染的另一個優點是您可以為不同類型的用戶設置多個Navbars
。 (不是最佳實踐,但您可以這樣做)。
或者,如果您希望擴展您在該領域的知識,您可以使用ReactJS
或Angular
等前端框架獲得更好的結果......
我絕對建議您不要使用js
或任何其他客戶端語言!
我要推薦的是:我不知道它是否算干凈,但是......
我寫了一個 web 應用程序,導航欄取決於用戶的訪問級別,
所以登錄后,取決於用戶的訪問級別,我包含的頭文件的路徑會有所不同。
<?php
include(the path of the intended header/header.php);
?>
我從數據庫中得到了預期的路徑。
如果您的程序對用戶訪問級別不那么敏感,或者您沒有非常動態的導航欄,我認為這是一個好方法!
否則等待專業人士回答;)
我更喜歡通過 php 將類名應用於<body>
並通過 css 顯示/隱藏相關元素,它還可以控制頁面上的其他元素,而不僅僅是nav
。
編輯:這里的安全性不是問題,因為您應該限制 php 訪問,而不僅僅是隱藏鏈接。 這里的方法只是處理布局。
nav ul li { display: none; } body.guest nav ul li.guest, body.logged nav ul li.logged { display: block; }
<?php $user_logged = ($user->guest) ? 'guest' : 'logged'; ?> <body class="<?php echo $user_logged; ?>"> <nav> <ul> <li class="guest"><a href="#">Nav 1</a></li> <li class="guest"><a href="#">Nav 2</a></li> <li class="logged"><a href="#">Nav 3</a></li> <li class="guest"><a href="#">Nav 4</a></li> <li class="logged"><a href="#">Nav 5</a></li> <li class="logged"><a href="#">Nav 6</a></li> <li class="guest"><a href="#">Nav 7</a></li> <li class="logged"><a href="#">Nav 8</a></li> <li class="logged"><a href="#">Nav 9</a></li> <li class="guest"><a href="#">Nav 10</a></li> </ul> </nav> </body>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.