React/Redux 应用程序中的身份验证答案

【问题标题】：Authentication in React/Redux applicationReact/Redux 应用程序中的身份验证
【发布时间】：2018-08-26 02:16:09
【问题描述】：

我对 redux 比较陌生，基本上是前端与后端分离的概念。早些时候，我使用了 laravel 和 RoR 框架，您可以在其中实际结合前端和后端逻辑并在视图中访问后端代码。使用这种方法，很容易处理身份验证，因为我上面提到的框架具有会话中间件，即使在页面刷新后也可以检索经过身份验证的用户数据。

使用 redux 时情况发生了变化。我了解如何对用户进行身份验证的部分（基本上是发送POST 请求并将数据写入商店），但是我如何处理页面刷新，所以所有数据都会被减速器的初始状态重置?

在我看来，唯一的出路是将经过身份验证的用户存储在 localStorage 中，如果它存在于那里 - 使其成为减速器的初始状态？安全吗？或者也许有一些关于这种方法的最佳实践？

[重要] 关于我的后端逻辑的几句话：

我使用 laravel 作为后端（它基本上用路由器渲染反应视图，所有前端逻辑都是，if url 不以 /api）。

我不使用 JWT 或任何令牌方法，因为我可以访问所有默认中间件，这使我可以使用用户数据发送请求和获取 session 标识符作为 cookie（因此来自 react\redux 应用程序的每个 ajax 请求都会被 laravel 自动验证）。

【问题讨论】：

如果您使用 laravel 默认身份验证，然后添加会话标头，会话不应该保持刷新吗？
@SérgioReis 后端没问题，因为它会自动从 cookie 中读取会话。但我说的是前端。 Redux 在每次页面刷新时根据 reducer 的初始状态重新填充 store。
为什么不在第一次加载的时候发送一个http请求来获取你的用户和数据呢？我可能只是不理解这个问题本身，你能举个例子吗？

标签： javascript laravel reactjs authentication redux

【解决方案1】：

当您的应用加载并初始化 redux 存储时，您可以从 cookie 或 localStorage 中读取数据，并使用 redux 的 createStore 将会话 ID 传递到预加载状态。

这足以从服务器最初获取用户数据。通常这是由根 App 组件的 componenWillMount 触发的异步 redux 操作。

每当会话 ID 更改时，请确保它保存在 localStorage、cookie 或您选择的任何内容中。

如果你不想用preloadedState代替createStore，也可以读取负责auth/user数据的reducer的initialState中的session ID。

【讨论】：

现在想象一下，您将发送用户身份验证请求每个页面刷新，即使用户甚至没有注册并试图访问网站的一部分，不需要经过身份验证的地方..
不，这不会发生，您可以在没有在服务器端完成任何身份验证的情况下提供应用程序。如果 react/redux 应用在浏览器的持久化存储中找不到会话 ID，它会提示用户先登录。
这种方法的问题是 laravel 为每个连接创建会话，无论用户是否经过身份验证
好吧，如果你重新加载页面，那是对服务器的请求，不管使用的是什么 js 框架。不完全确定你的问题是什么。
是的，但是 1 个请求，所有数据都在其中处理。