javascript - React Redux 身份验证

标签 javascript reactjs authentication redux

我有以下情况,我有一个 REST API 和一个 React+Redux 应用程序。

当用户登录时,我将 token 保存到 localStorage,基于此,如果用户返回页面,我会调用服务器 /api/whoami { token }使用 token ,我验证 token 并返回用户详细信息,我将使用这些详细信息更新我的 Redux 存储。

我的问题是,如果我刷新并且想在 componentDidMount 中执行某些操作,即使用户已登录 Redux 存储,但由于对 /api 的请求尚未更新,/whoami 尚未完成。

如何等到对 /api/whoami 的请求完成并设置用户,然后渲染我的应用程序?

对于此类问题还有其他解决方案吗?

谢谢!

最佳答案

您可以在您的案例中使用所谓的Aync 操作,并在获取详细信息时显示加载组件。

在这里您必须使用thunk 中间件。它位于一个名为 redux-thunk 的单独包中。当 Action 创建者返回一个函数时,该函数将由 Redux Thunk 中间件执行。详细阅读 here

功能:在开始获取操作、调度和将 isLoading 设置为 true 的操作之前,以及在收到响应之后调度另一个操作,该操作将设置 isLoading: false 并在您的显示屏上放置一个条件,即如果 isLoading 为 true,则返回加载组件,否则返回配置文件组件

关于javascript - React Redux 身份验证,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44588742/

相关文章:

javascript - 计算元素的宽度 - Angular 指令

reactjs - 为什么 date-fns isAfter 和 isBefore 都是 false?

reactjs - React Hooks 无限循环与数组

python - 你如何在Python中调用存储在变量中的函数,mh

javascript - 前端应用程序的安全性

CakePHP 2.x身份验证条件

javascript - 使用 JavaScript 下载二进制文件

javascript - 等待循环

javascript - 在用 html canvas 和 javascript 绘制塞舌尔国旗后,我试图使用数组或循环来简化我的代码

javascript - 在 react 中发布请求