在 React JS 應用程序中，在哪里存儲 JWT 令牌和用戶 ID？

Question

我的應用程序包含前端的 React JS 和后端的 Fast Api。 我正在使用令牌身份驗證並生成 JWT 令牌並發送回客戶端，我將 JWT 令牌和用戶 ID 存儲在客戶端（本地存儲）中，並且必須隨每個請求一起發送令牌

代碼

export const handleAuthentication = (data) => {
  localStorage.setItem("userID", data.user_id);
  localStorage.setItem("subID", data.user_sub);
  localStorage.setItem("access_token", data.access_token);
  localStorage.setItem("refresh_token", data.refresh_token);
  localStorage.setItem("is_authenticated", "true");
  localStorage.setItem("session_expired", "false");
  window.location.replace("/success");
};

但是我在某處讀到本地存儲不安全。 我也提到了很多帖子，但我沒有得到正確的方法。 任何的意見都將會有幫助 ！

Answer 1

Cookie 是最好的選擇，因為除了 LocalStorage 或 SessionStorage 之外，您可以在 cookie 中進行更精細的研磨控制。 他們之中有一些是 -

到期

您可以定義 cookie 的生命周期

Set-Cookie: id=a3fWa; Expires=Thu, 31 Oct 2021 07:28:00 GMT;

限制訪問

具有 Secure 屬性的 cookie 僅通過 HTTPS 協議通過加密請求發送到服務器，從不使用不安全的 HTTP（本地主機除外），因此中間人攻擊者不容易訪問

Set-Cookie: id=a3fWa; Expires=Thu, 21 Oct 2021 07:28:00 GMT; Secure; HttpOnly

SameSite 屬性

SameSite 屬性允許服務器要求 cookie 不應與跨域請求（其中 Site 由可注冊域定義）一起發送，這提供了一些針對跨站點請求偽造攻擊 (CSRF) 的保護。

Set-Cookie: mykey=myvalue; SameSite=Strict

https://dev.to/rdegges/please-stop-using-local-storage-1i04

https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies