在每次页面加载时反应刷新用户数据答案

【问题标题】：React refresh user data on every page load在每次页面加载时反应刷新用户数据
【发布时间】：2019-01-14 22:19:08
【问题描述】：

我在处理我正在开发的 React 应用程序中遇到问题。当用户登录时，它会存储有关用户的信息，例如他们的姓名和角色。使用这个我们显示用户的名字，并且显然使用他们的角色来显示或隐藏组件。

我无法弄清楚的问题是，如果用户的名称发生变化，或者在他们登录时他们的角色发生变化，则信息不会更新。现在我可以在每次用户编辑他们自己的个人资料时刷新数据，但是如果管理员用户编辑的是登录用户的名称或角色怎么办？直到下次登录才会更新。

我考虑过使用withRouter 并使用history.listen 并在基础App.js 上的每个页面加载时更新用户信息。我看到的问题是它经常被 REPLACE 和 PUSH 调用两次，所以我不想进行 2 次 API 调用。

有没有一种方法我只能通过路由更改进行 1 次 API 调用？我该怎么做呢？我是否正确地接近这个？有没有更好的方法来解决这个问题？我似乎找不到任何可以帮助我解决此问题的方法。

【问题讨论】：

标签： reactjs react-router-dom

【解决方案1】：

您可以创建一个自定义路由组件，在每次重定向时调用 API。看看这个https://reacttraining.com/react-router/web/example/auth-workflow。在此示例中，“PrivateRoute”组件用于检查用户是否在每个请求中都经过身份验证。您可以创建一个 UpdateUserRoute 组件来调用 API 并检查用户数据的变化。

【讨论】：

真的没想过那样做。我已经需要创建一个PrivateRoute 组件，所以它应该可以完美运行！
是的，如果您只想在私有路由内拨打 1 个电话，则不必先调用“isAuthed”，然后再调用“getUserData”。您可以只调用“getUserData”，它会告诉您您是否已通过身份验证并返回用户信息。