关键词：
【中文标题】在 React 中使用登录和注销的用户渲染组件【英文标题】：Render components with logged in and logged out user in React 【发布时间】：2021-03-10 12:12:43 【问题描述】：我是 React 的新手，但不知何故，我设法开发了一个 MERN（Mongoose、Express、React、Node）应用程序。后端将数据存储到 Mongo 数据库中。它使用用户数据向前端发送和接收 API。我正在从后端接收已经注册的用户数据并将其存储到全局挂钩中，以便所有组件都可以共享它。
我想要实现的是能够根据用户是否登录来渲染组件。我需要 JWT 之类的本地存储或 cookie，但不知道如何开始。即使刷新应用程序，用户信息也应该保留。有人可以建议我如何实现这一目标吗？
另外，我正在使用 react-router-dom ^6。我已经意识到以前的版本有一些不同。
提前致谢！
【问题讨论】：
您现在如何处理应用中的登录？如果用户已对本地存储进行身份验证，然后在应用程序加载时使用它，那么存储将是有意义的。像这样***.com/questions/31084779/… 【参考方案1】：这个问题的正确答案不止一个。通常，您会将 JWT 令牌发送到前端并将其存储在本地存储中。比您检查本地存储并授予用户访问您定义的身份验证路由的权限。
如果你想更进一步。您可以发送两个令牌，一个是普通的 JWT 令牌，一个是具有到期时间（通常为 15 分钟）的 JWT 刷新令牌。该刷新令牌附加到每个请求并在后端更新。前端一直在检查令牌在 useEffect 函数中是否仍然有效。这两个令牌都存储在您的本地存储中，而主令牌用于保持用户登录。如果刷新令牌过期，主令牌和刷新令牌将被删除并且用户退出。
如果您想更进一步，您可以使用 redis 将 JWT 令牌存储在后端，并根据 userId 检查后端的每个请求是否仍然有效。
但是，您也可以使用 cookie。 我建议使用刷新令牌方法，因为它似乎是最常见的方法。
【讨论】：
在 React.JS 中刷新后，如何让用户保持登录到 firebase？
】在React.JS中刷新后，如何让用户保持登录到firebase？【英文标题】：HowdoIkeepauserloggedintofirebaseafterrefreshinReact.JS?【发布时间】：2018-07-2901:54:08【问题描述】：安装组件时，我想渲染登录屏幕或应用程序，具体取决于用户是否登录... 查看详情
其他组件使用localstorage登录/注销时如何在AppBar中显示和隐藏登录和注销按钮
】其他组件使用localstorage登录/注销时如何在AppBar中显示和隐藏登录和注销按钮【英文标题】：HowtoshowandhideloginandlogoutbuttonsinAppBarwhenothercomponentlogsin/outusinglocalstorage【发布时间】：2021-08-2809:46:40【问题描述】：我有一个App组件，... 查看详情
在 React Native 中更新渲染组件
...nReactNative【发布时间】：2016-06-1300:44:36【问题描述】：我使用ReactNative和Flux并没有遵循如何在此处渲染另一个组件UserStore.addChangeListener(function());而是Form。所以，我有一个登录表单，如果登录成功-我需要呈现NewsFeed。我该怎么做... 查看详情
react组件渲染
...必须是唯一的。因为组件的调用是将组件当成一个DOM节点使用，所以组件里面可以包含子节点。React对组件的子节点通过this.props.children来获取，通常this.props.children会有以下几种情况为了解决这种数据类型不一致导致在使用的过... 查看详情
为啥云端服务的 React 应用程序不渲染组件
...很陌生。所以请忽略错误。所以我在我的反应应用程序中使用auth0进行身份验证。登录按钮是重定向到auth0身份验证按钮的组件，登录后用户 查看详情
React Router 问题：React 在同一页面中渲染两个组件
...的路由之外输入不同的url时，我正在尝试处理404页面，但使用我对React和react-router的了解只需要放置最后一条路由没有路径，并且e 查看详情
如何在 React 中使用 onClick() 函数渲染不同的组件？
】如何在React中使用onClick()函数渲染不同的组件？【英文标题】：HowcanIrenderdifferentcomponentusingonClick()functioninReact?【发布时间】：2021-12-1920:13:54【问题描述】：我是React和创建井字游戏的新手。我想创建一个包含三个选项的起始页... 查看详情
如何通过使用功能组件更新 React 中的状态来重新渲染页面。？
】如何通过使用功能组件更新React中的状态来重新渲染页面。？【英文标题】：Howtore-renderapagebyupdatingthestateInReactusingfunctionalcomponent.?【发布时间】：2021-11-2204:58:56【问题描述】：我正在处理POST和GET请求。当用户发出POST请求时，... 查看详情
react之fetch登录请求formdata提交参数
...react对表单元素做了优化处理，对其进行抽象处理，使其使用方式更统一和规范。约束性组件和非约束性组件约束性组件，简单来说就是React管理了它的value，而非约束性组件的value则是由原生的DOM管理。所以在写法上区别很大：... 查看详情
从 Strapi (React Native) 注销用户？
...8【问题描述】：我一直在尝试从我的React本机应用程序（使用Strapi）中注销已登录的用户。我应该将其重定向到任何特定的URL还是可以删除JWT令牌？如果是，请指出我正确的方向。出于显而易见的原因，将“注销”按钮重定向到... 查看详情
React - 注销组件问题
...型的优惠券项目。基本上我的登录组件工作正常，我正在使用Redux来控制操作。AuthComponent：exportclassAuthAppStatepublicuser:NewUserModel=null;publicconstructor()const 查看详情
React Router - 渲染组件的问题。白屏
...screen【发布时间】：2020-01-1617:06:33【问题描述】：我正在使用react-router-dom在仪表板中工作。我有一个结构，即身份验证页面和仪表板页面。当我从登录导航到mainPages并尝试在DashboardContainer中选择导航链接时，会显示一个白屏。co 查看详情
如何在 React jsx 中使用 innerHTML 渲染组件
】如何在Reactjsx中使用innerHTML渲染组件【英文标题】：HowtorenderacomponentusinginnerHTMLinReactjsx【发布时间】：2019-05-1714:16:18【问题描述】：我目前正在编写将在两个视图（图形和列表）之间切换的功能。二是视图容器的类名。toggleGrap... 查看详情
在 React js 应用程序中使用 Keycloak 注销用户的问题
】在Reactjs应用程序中使用Keycloak注销用户的问题【英文标题】：ProbleminlogoutuserusingKeycloackinReactjsapp【发布时间】：2021-10-1002:20:48【问题描述】：我正在Reactjs应用程序中使用Keycloak实现身份验证。在这种情况下，我使用ReactContext来... 查看详情
react重新渲染指南(代码片段)
...-已经在屏幕上的组件的第二次和任何连续渲染当React需要使用一些新数据更新应用程序时，会发生重新渲染。通常，这是由于用户与应用程序交互或通过异步请求或某些订阅模型传入的一些外部数据而发生的。没有任何... 查看详情
在 React 中没有本地状态的情况下使用新数据重新渲染组件
】在React中没有本地状态的情况下使用新数据重新渲染组件【英文标题】：Re-renderthecomponentwithnewdatawithouthavinglocalstateinReact【发布时间】：2019-03-0816:47:08【问题描述】：我正在练习react和redux，我正在创建一个简单的应用程序，其... 查看详情
如何使用 REACT 防止组件在动画中重新渲染（更新）
】如何使用REACT防止组件在动画中重新渲染（更新）【英文标题】：Howtopreventcomponentre-render(update)insideanimationswithREACT【发布时间】：2019-10-2909:17:21【问题描述】：在过去的几天里，我一直在为React使用不同的动画库，试图找到在... 查看详情
React Hooks 有条件地渲染登录/注销 w/本地存储变量
】ReactHooks有条件地渲染登录/注销w/本地存储变量【英文标题】：ReactHooksConditionallyRenderLogin/Logoutw/LocalStorageVariable【发布时间】：2020-04-1306:22:59【问题描述】：我希望导航栏根据本地存储中是否存储令牌有条件地显示“登录”或... 查看详情