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

Question

我在解决我正在开发的React应用程序中出现问题时遇到问题。 用户登录时，它将存储有关该用户的信息，例如他们的姓名和角色。 使用此方法，我们可以显示用户名，并且显然可以使用其角色来显示或隐藏组件。

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

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

有没有办法只能从路由更改中进行1个API调用？ 我应该怎么做呢？ 我什至能正确地做到这一点吗？ 是否有更好的方法来解决此问题？ 我似乎找不到任何可以帮助我的东西。

Answer 1

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