我的問題是關於在今天的前端世界登錄：驗證在前端的世界框架
在服務器端渲染的老路子- 我會在後臺驗證用戶登錄和渲染整個HTML適合登錄用戶的頁面。
但現在使用前端框架 - 我在用戶第一次進入網站時爲用戶提供了所有可能的頁面，然後在瀏覽器中爲他提供了正確的頁面。
據我現在所理解的 - 要在前端框架中登錄用戶，我需要保存一個變量，指示他在localStorage中進行了身份驗證（甚至可能是他在管理員身上的角色），並且以這種方式當我構建頁面時，我只需要詢問這個變量是否在localStorage中以知道用戶是否已登錄，並且如果他的角色是admin，並且兩者都是真的，我向他展示所有管理功能
但是，這意味着如果我是黑客 - 我需要做的就是手動將此變量添加到localStorage，然後我將看到整個管理功能。
這給我帶來了我的問題 - 有沒有更好的方式在今天的前端世界中執行登錄驗證？ 還是我必須讓黑客看到所有的管理功能，並且只能保護它們不被未經授權的用戶在後端使用？
儘管您可以將特定於經過身份驗證的用戶的頁面作爲單頁應用程序的一部分提供，但您不會提供這些數據。因此，用戶可能會破解網站以查看僅管理員頁面並獲取佈局，但內容將會丟失。
將向服務器發送一個單獨的請求以獲取受保護的數據，並且僅當用戶具有所需權限時纔會返回安全內容。然後例如使用Ajax將其插入頁面中。
服務器檢查客戶端是否通過身份驗證有很多種方法。最簡單的方法是在每次請求時傳遞用戶名和密碼。您提到的本地存儲中的變量可以存儲用戶名和密碼，以便可以通過每個HTTP請求引用它。事實上，你不會那樣做，因爲它不是很安全。更有可能的是，您將發送服務器在登錄時返回的某種令牌，並且已被散列和/或加密。如果用戶要修改它，服務器將知道並且將使其無效，並拒絕發送請求的內容。
看看Passport中列出的一些認證策略。有很多圖書館都這樣做，但護照有很好的選擇供您參考。
如果您確實想停止未經授權的用戶，即使看到管理員選項，您也不應該爲該應用程序呈現該HTML作爲主應用程序的一部分。在需要時，應該提出一個單獨的請求來返回HTML。點擊「管理員」按鈕將向管理頁面發出請求。如果用戶具有所需的權限（與傳統的多頁面應用程序完全相同），服務器將只返回相關的視圖。區別在於客戶端應用程序如何處理它。現在我們將它插入當前頁面而不是刷新整個事物。
我想刪除「發送用戶名和密碼與每個請求」。這只是令人討厭的。 – jlareau
我已經更新了答案。這是一件可怕的事情（特別是將它存儲在本地！），但它是讓我們的腦袋圍繞我們想要實現的最簡單的方式。 –
您提到的變量通常是JWT令牌。您在每個請求上發送給服務器的標記（您可以使用Angular攔截器執行此操作）並在服務器上進行驗證。你可以在這裏閱讀更多關於它們：https://jwt.io/introduction/
至於用戶信息（姓名，角色等），我會保持在內存，而不是本地存儲。
至於你的管理部分的問題，是的，你總是假設黑客看到你所有的前端。但是由於您在服務器端驗證實際操作，所以他只能查看它。
你可以將你的前端分成2個代碼庫，並且對管理員有更嚴格的訪問權限，但是管理員理論上可以保存你的前端資產並將其泄露給黑客。因此，您可以獲得2個代碼庫的所有麻煩，從而獲得更多保護。
底線，只是保護後端。
您不想使用localStorage，但可能是一個安全的Cookie，因爲如果您將admin角色存儲在localStorage中，並且用戶被撤銷後立即進入管理員訪問權限，則用戶仍然可以訪問僅限管理員的區域，因爲localStorage持續 – yoonjesung