除非用戶已登錄，否則如何隱藏 html 的一部分？

Question

我一直在使用 JS、CSS 和 HTML 制作 web 應用程序，對於身份驗證部分，我正在將該應用程序與 ZBF912E1515FC235 集成。

問題是，在登錄頁面上，如果您檢查應用程序，實際應用程序的顯示屬性只是設置為無，除非 firebase 將用戶登錄。但是任何了解這些事情如何工作的人都可以簡單地 go 並設置顯示= 塊。

我一直在考慮在不同的 URL (example.com/signup) 獲取登錄表單，並且在身份驗證成功后它將重定向到應用程序 (example.com/app)。

我的問題：

1. 如何臨時移除 HTML
2. 如何防止未登錄用戶訪問 example.com/app？

如果您有更好的方法來做到這一點，我對所有人都持開放態度。

Answer 1

您需要知道客戶端/前端始終是公共事物。 正如您所提到的，如果有人只是對 web 開發有所了解，他們可以檢查和更改頁面上的內容。 您的問題的簡單答案是：

1. 使用服務器渲染的 HTML
2. 使用受保護的路由（ 例如 Angular ）

Answer 2

由於您沒有使用 PHP，我認為最適合您的選擇是：

• 文檔准備好后，克隆要隱藏的元素 (element.cloneNode(true))
• 刪除實際元素
• 當您希望它再次出現時，只需將克隆的元素 append 復制到父節點即可。

這樣，它就不會出現在 DOM 樹中，您仍然可以稍后添加它。

這是一個示例：解決方案示例

但如果您正在開發單頁應用程序 (SPA)，我建議您使用框架（如 Vue、React）。 它解決了您的兩個問題並改善了應用程序的執行和開發。

Answer 3

如果您使用的是 angular，則可以使用受保護的路由，例如 auth。