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。