reactJs 中导航栏的动态欢迎 <user>

Dynamic welcome <user> of navbar in reactJs

我对在 React 的 NavBar 中动态呈现登录用户名有疑问。

所以我的应用程序结构如下

<App>
<Header/>
<Router>
....
<Router/>
<Footer/>
<App/>

现在在 header 组件中，我需要在用户登录时显示“欢迎 ”。这是我想到的一些解决方案，但不确定我是否遗漏了在任何事情上。

  1. 将其作为道具发送给 header。但是，如果我在 App 组件中执行 setState 并重新渲染整个应用程序组件（我想避免），它只能是动态的
  2. 把它存储在redux中，所以header可以动态获取更新。但是由于我使用的是JWT，并且用户需要保持登录状态，如果用户刷新页面，存储内容将被清除。
  3. 我也可以将用户名存储在 localstorage 中，但是整个应用程序仍然需要重新渲染才能显示更改

-)我觉得Angular可以通过BehaviorSubject来完成，但是在这种情况下，我很无能

有没有我遗漏的解决方案或方法？ 提前致谢

您可以将用户作为道具发送到 header。这是一种首选方法。让用户登录并使用 React 中现在可用的 useState 钩子的 redux 保存他们的应用程序状态。

关于您的第二个问题，JWT 会保留 session 数据。重新呈现页面不会导致它消失。 Well-designed 应用的 JWT 有过期时间（通常为 20 分钟或更短）。

我开发了一个投票应用程序，它完全符合您的要求，并且不需要任何全局状态管理。随意挑选它。这是一个 open-source 项目。我想我们使用了 Auth0 或 Google 的 Oauth 库来进行身份验证。

这是 React header(navbar) 的代码：https://github.com/poll-pal/poll-pal/blob/master/src/Components/Header/Header.js

这是支持它的 Express 服务器的代码：https://github.com/poll-pal/poll-pal/blob/master/server/routes/auth.js

首先，如果您想让您的用户保持登录状态，那么您必须将 JWT 存储在某处。这里 'somewhere' 我的意思是，这样您就可以在下次重新加载时访问它。

在我的最大项目中，我将 JWT 存储在 local-storage 中。它的工作原理是这样的

  • 当用户登录时，我将 JWT 存储在 local-storage 中，也在我的减速器中。
  • 然后在我的 'Inital State' 上，我总是使用 local-storage，这样如果 local-storage 中有任何内容，则表示用户已登录 
initial_state = {
  userName: localstorage.getItem('user_name')
}

这就是让您的用户保持登录状态并在注销时擦除 local-storage 以及 reducer 的方法。