req.user 未定义。 React.js，路线，快递，护照

Question

我已尝试简化我的应用程序以进行故障排除。 https://github.com/monochromaticmau/log-in

我的问题是如何在整个网页中使用这个req.user 来查看用户是否已登录，以便我可以限制某些功能。我的计划是在每个 componentDidMount 上检查 req.user 以查看用户是否已登录，然后再在每个页面上启用某些功能。 req.user 在登录后以 undefined 出现，在 modal 后出现 GET 请求。当我使用 REST 客户端对其进行测试时，它可以正常工作（见图）并进行反序列化，但在应用程序示例中却没有。我最感兴趣的是主页上的按钮工作和登录后数据页面中启用的按钮。它在我的应用程序中的行为类似。当我在登录后尝试 GET 用户请求时，req.user 是 undefined。

用户名：x

密码：x

用于测试。

我关注了https://www.youtube.com/watch?v=IUw_TgRhTBE，这让我走到了现在，但我不知道如何在我的所有路线上应用此登录。我想确保用户已登录以打开某些功能。如果您没有登录，我会使用一个禁用的按钮来模拟这一点。

如何实现这样的东西？我认为护照处理了这个并保持了一个持久的会话，这就是GET 请求是（或应该）能够在成功登录POST 请求后获得req.users 的方式吗？视频或文章会很棒。

Answer 1

选项 1： 您可以在登录后以 redux 状态保存用户数据，并且在组件中您可以使用 useEffect 检查 redux 状态是否有一些值，如果它有值，那么您可以使用？（三元）运算符来显示所需内容。如果您对 redux 不满意，请使用 Option2

选项 2： 登录完成后，将用户数据保存在本地存储中，并在不同的组件中检查useEffect 本地存储是否包含所需的值，并基于该值在页面中呈现所需的数据

关于 redux 和 react 的文章中的文章非常好，因为 redux 正是为你在这里想要的而构建的。这个不错 https://medium.com/@bretcameron/a-beginners-guide-to-redux-with-react-50309ae09a14

对不起，我这里没有任何代码示例，但请随意评论

Answer 2

我真正的问题是如何在整个网页中使用这个 req.user 来查看用户是否登录，以便我可以限制某些功能。

你必须制作两个组件

公共路由组件，负责渲染你的 react 应用的所有公共路由，公共组件应该封装在里面

Private Route 组件，负责渲染应该经过身份验证的路由，您可以在其中检查req.user，并且您的所有私有路由都应该包含在其中（因此您可以根据用户限制某些功能登录）

私有路由组件的基本思想是：

const PrivateRoute = (props) => {
  // if not logged in
  if (!req.user) {
    return 'You are not logged in'
  }

  // otherwise show private children components
  return props.children;
}

然后使用这个 Private Route 组件来包装你想要认证的所有路由：

<PrivateRoute>
  <SuperSecretComponent />
</PrivateRoute>

现在SuperSecretComponent只有在用户登录后才能访问。更多here