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

时间:2018-03-16 22:44:28

标签: javascript laravel reactjs authentication redux

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

当您使用redux时,情况发生了变化。我理解部分如何来验证用户(基本上发送POST请求并将数据写入商店),但我如何处理页面刷新,因此所有数据都会被初始状态重置减速机?

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

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

我使用laravel作为后端(基本上使用路由器呈现反应视图,其中所有前端逻辑都是,如果 url没有&#39 ; t以 / api 开头。

使用 JWT 或任何令牌方法,因为我可以访问所有默认中间件,这使我可以向用户发送请求数据并将会话标识符作为Cookie(因此,来自react \ redux app的每个ajax请求都会自动通过laravel进行身份验证)。

1 个答案:

答案 0 :(得分:0)

当你的应用加载并且redux商店被初始化时,你可以从cookies或localStorage读取,并使用redux' s createStore将会话ID传递到预加载状态。

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

每当会话ID发生变化时,您都要确保它在localStorage,cookies或您选择的任何内容中保留。

如果您不想将preloadedState用于createStore,您还可以在负责验证/用户数据的reducer的initialState中读取会话ID。