用戶登錄時如何從前端獲取身份驗證令牌

Question

我正在嘗試構建一個簡單的項目，用戶可以在登錄后從 api 搜索電影並將所選電影添加到他們的“/電影”頁面。我正在使用 Nodejs，mongodb，表示后端和 vanilla ZDE9B9ED708D7E91E1DC前端。

當用戶注冊或登錄時，我正在創建一個 JWT 令牌並將該令牌添加到數據庫中。 我的目標是將他們重定向到他們的主頁，即“/user/movies”

• 假設用戶第一次登錄並關閉了網站，一段時間后（不足以使令牌過期）用戶再次打開網站並轉到“/user/movies”（需要身份驗證。 )

我的問題是，我們如何在重新訪問后仍然與用戶保持身份驗證，我們如何才能獲得先前創建的令牌？

當我使用 postman 時，我可以手動檢查數據庫中的令牌並將授權令牌輸入到 header 並發送發布請求以驗證用戶。

但是在瀏覽器中，我怎樣才能訪問我之前創建的令牌以再次驗證用戶？

• 我已經嘗試過localStorage但是，為了將令牌保存到
  localStorage，我需要從數據庫中取，但是你不能
  在后端更改 localStorage。

• 我試過cookies和http-only標志，但是我怎樣才能從前端訪問令牌，因為 http-only 限制使用 javascript

為了從前端獲取 JWT 令牌，我有什么選擇，這樣我就可以保持用戶仍然經過身份驗證，即使他們關閉了網站並稍后再回來。 （不足以使令牌過期）

我對身份驗證的工作方式非常陌生如果我犯了一個邏輯錯誤，請告訴我。

Answer 1

• 首次對用戶進行身份驗證時，將令牌存儲在localStorage中。
• 並且由於 localStorage 的數據永遠不會自行刪除，因此您可以監聽DOMContentLoaded事件，在重新訪問頁面時，您可以從 localStorage 檢索令牌並使用它對用戶進行身份驗證。
• 您可以在此處閱讀有關 localStorage 的更多信息

Answer 2

您需要發送 JWT 令牌以及其他數據作為登錄 API 的響應。 在前端收到響應后，只需通過“localStorage.setItem("token",response.data.token) 將 JWT 令牌存儲到 localStorage。

現在，即使用戶關閉瀏覽器並再次返回，您也可以隨時參考 localStorage.getItem("token") 來獲取令牌。 請不要忘記在用戶注銷時通過 localStorage.removeItem("token") 清除此 localStoage。

另請注意，在創建 JWT 令牌期間不要提供任何過期，否則即使您將其存儲在本地本地存儲中，它也會在服務器端過期並給出“禁止錯誤”