React / Redux應用程序中的身份驗證

Question

我對redux還是相對較新的，基本上是概念，前端與后端是分開的。 之前，我使用了laravel和RoR框架，您可以在其中實際組合前端和后端邏輯，並在視圖中訪問后端代碼。 使用這種方法，可以很容易地進行身份驗證，因為上面提到的框架具有會話中間件，即使在刷新頁面后，會話中間件也可以檢索經過身份驗證的用戶數據。

使用redux時，情況發生了變化。 我了解這一部分如何驗證用戶身份（基本上發送POST請求並將數據寫入存儲），但是我如何處理頁面刷新，因此所有數據都由reducer的初始狀態重置？

在我看來，唯一的出路是將經過身份驗證的用戶存儲在localStorage中，如果該存儲持久存在，將其設置為reducer的初始狀態？ 安全嗎？ 也許有一些關於這種方法的最佳實踐？

[重要]關於我的后端邏輯的幾句話：

我正在使用laravel作為后端（ 如果 url並非以/ api開頭， 則基本上是使用路由器渲染反應視圖，其中所有前端邏輯都在路由器上）。

我沒有使用JWT或任何令牌方法，因為我可以訪問所有默認的中間件，這使我可以發送帶有用戶數據的請求並以cookie的形式獲取會話標識符（因此來自react \\ redux應用程序的每個ajax請求都會自動獲取由laravel驗證）。

Answer 1

當您的應用加載並且Redux存儲已初始化時，您可以從cookie或localStorage中讀取數據，並通過redux的createStore將會話ID傳遞到預加載狀態。

這足以從服務器上最初獲取用戶數據。 通常，這是由您的根App組件的componenWillMount觸發的異步redux操作。

每當會話ID更改時，您都要確保將其保存在localStorage，Cookie或您選擇的任何內容中。

如果您不想將preloadedState用於createStore ，則還可以在負責身份驗證/用戶數據的化簡器的initialState中讀取會話ID。