React基于本地存储删除重新呈现身份验证路由
React 是一个用于构建用户界面的 JavaScript 库。它是基于组件化开发的，可以通过组件的重用来构建复杂的用户界面。React 的核心思想是组件化和单向数据流。
本地存储是指在客户端浏览器中保存数据的一种方式。在 React 中，可以使用 Web Storage API 来实现本地存储，其中包括了 localStorage 和 sessionStorage 两种方式。localStorage 是一种持久化的本地存储方式，数据会一直保存在客户端浏览器中，除非手动清除或者代码删除；sessionStorage 是一种会话级别的本地存储方式，数据仅在当前会话中有效，关闭浏览器后数据会被清除。
删除重新呈现身份验证路由是指在用户身份验证过期或需要重新登录时，通过删除当前路由并重新呈现身份验证相关的组件或页面，引导用户重新进行身份验证。
React 中可以通过使用 react-router 来实现路由管理。对于身份验证路由，可以通过以下步骤实现删除重新呈现：
- 在 React 组件中引入 react-router 相关的库和组件，如 React Router Dom。
- 定义一个路由配置，包括需要进行身份验证的路由和对应的组件或页面。
- 在需要进行身份验证的路由组件中，判断用户的登录状态。如果用户未登录或者身份验证过期，则通过编程方式删除当前路由，如使用
history.replace('/login')来跳转到登录页。 - 在登录页中，用户可以输入用户名和密码进行身份验证。
- 身份验证成功后，可以根据业务逻辑跳转到之前需要进行身份验证的路由，或者跳转到其他页面。
推荐的腾讯云相关产品和产品介绍链接地址：
- 腾讯云对象存储（COS）：是一种高可用、可扩展的云端存储服务，适用于存储和处理海量文件、图片、视频、音频等各类非结构化数据。详情请参考：https://cloud.tencent.com/product/cos
- 腾讯云数据库 MySQL 版：是一种基于云的关系型数据库服务，提供高性能、可扩展、可靠的数据库解决方案。详情请参考：https://cloud.tencent.com/product/cdb_mysql
- 腾讯云安全组：是一种用于设置网络访问控制的虚拟防火墙，可以保护云服务器的网络安全。详情请参考：https://cloud.tencent.com/product/cfw
- 腾讯云人工智能平台：提供多种人工智能服务和工具，包括自然语言处理、图像识别、智能音箱等。详情请参考：https://cloud.tencent.com/product/ai
- 腾讯云物联网平台：为物联网应用提供了设备接入、消息通信、数据存储、云端计算和应用开发等全套解决方案。详情请参考：https://cloud.tencent.com/product/iotexplorer
- 腾讯云移动推送：提供全球化、跨平台的消息推送服务，支持 iOS、Android、Windows 等多种移动设备。详情请参考：https://cloud.tencent.com/product/umeng
- 腾讯云云服务器（CVM）：提供高性能的云端计算资源，可以按需创建和管理云服务器实例。详情请参考：https://cloud.tencent.com/product/cvm
相关·内容
我的react应用程序中有一个受保护的路由，当localstorage项被删除时，我需要它来监听。如果该项目已删除，请返回登录页面。现在，我只是检查该项是否存在，但当localstorage项被删除时，它不会重新呈现组件。我尝试过使用像react-use-localstorage这样的库，但是当项目被删除时，它不会通知我，只有当它被更改时才会通知我。pathname: '/login',
浏览 20提问于2020-11-11得票数 0
我需要做的是根据用户的身份验证状态呈现react原生路由。现在我这样做是错误的，通过运行一个间隔来检查身份验证状态的变化： import React, { useState, useEffect } from 'react';
import { AppLoading我使用异步存储在用户进行身份验证时保存用户，并在用户单击注销按钮时将其从存储中删除。 有没有办法检查异步存储
浏览 22提问于2020-12-04得票数 0
1回答
我试图弄清楚我应该如何坚持身份验证。
假设用户使用电子邮件和密码成功地进行身份验证。当在本地存储(或会话存储)中存储访问程序时，React只需检查存储中是否存在它，然后继续呈现私有路由。因此，这意味着如果用户拥有无效/被盗的访问权限，那么在令牌被检查和失效之前，React似乎仍然暂时呈现私有页面(尽管没有私有内容)。这是个奇怪的行为吗？目前，我已经为安全cookie分配了
浏览 2提问于2019-10-19得票数 0
1回答
我正在开发一个应用程序，它正在使用React路由器，我注意到当我的Redux存储发生变化时，路由器正在重新呈现当前路由所引用的组件，而不是重新呈现路由本身。})<PrivateRoute path="/" component={HomePage}/>
但是，我注意到，当isAuthenticated的状态发生变化时，响应路由
浏览 3提问于2017-12-10得票数 1
回答已采纳
1回答
export default class FilterComponent extends React.Component { super
浏览 6提问于2021-12-27得票数 0
回答已采纳
我正在使用React和NodeJS后端。使用redux时，我希望确保在它检查的每个页面加载中，用户是否已登录。但是，当用户未登录时，我在控制台中收到一条消息：
我知道我为什么要得到错误，Nodejs中的路由是受保护的。
显然，我不希望用户在部署页面时看到这一点。如何正确处理此错误？
浏览 3提问于2020-07-03得票数 0
回答已采纳
1回答
我还使用react路由器将此路由设置为私有，并重定向未经身份验证的用户。我遇到了以下问题：React缺少一个依赖项：“profile”。要么包含它，要么删除依赖数组react/react。
这是我想要的“工作”方式。如果我输入了什么，然后刷新/更改页面，表单将使用更新的信息呈现。本地状态仍然由useState钩子控制，因为许多用户更改表单，并选择不将信息提交给数
浏览 2提问于2020-05-24得票数 0
回答已采纳
1回答
下面是我描述我的第一个问题和代码的链接。这段代码运行得很好，但这里的问题是，当我成功注册时，如果手动执行"/signUp“操作，则会显示较少的时间(<1秒)，就会显示注册屏幕。这不应该做，它应该直接指导我的"/home“。有什么解决办法吗？
浏览 4提问于2020-07-20得票数 0
回答已采纳
1回答
我很难理解为什么我要通过组件嵌套我的react路由。在下面的示例中，您有两个组件分布在多个文件中。，我发现这会更容易阅读，实现和理解我的路由器是怎么回事。它更类似于我在其他框架中实现路由的方式，比如VueJS的Vue StoreFront。编辑： return (
浏览 0提问于2020-08-05得票数 1
我有一个登录页面，用户在其中对我的服务器进行身份验证。如果用户通过了身份验证，那么我设置了两个本地存储密钥-一个用于token，另一个用于authtoken。React limits the number of nested updates to prevent infinite loops.只有当我注释掉对logout()的调用时，路由替换才能正常工作(当然，不会从本地存储中删除值)。
本地存储是
浏览 2提问于2022-02-02得票数 0
回答已采纳
2回答
我正在创建一个React路由器应用程序，我正在学习身份验证。以下是一些部分：
从登录到管理，一切都很好
浏览 0提问于2018-11-25得票数 1
回答已采纳
我在前端使用React，后端使用Express。我已经实现了基于JWT的正常认证系统。但是现在我想让身份验证成为可选的。因为它是一个自我托管的应用程序，一些用户可能只希望在本地网络= auth禁用的情况下使用它，还有一些用户希望将它公开给启用了的Internet = auth。在后端，我使用env变量USE_AUTH=false禁用身份验证，一切都正常工作。
然而，在前端，我基于存储在isAuthenticated状态中的AuthContext值呈现一
浏览 3提问于2021-10-28得票数 0
1回答
服务器返回一个令牌(1234)，为了访问受保护的区域，需要在身份验证头(Authorization: Bearer 1234)中使用它。
我应该如何处理登录并使浏览器在登录后使用新内容进行自我更新？
浏览 0提问于2016-01-22得票数 1
2回答
我还将这些信息保存在本地存储中，因此每当我重新加载页面时，我就可以从本地存储中获取值，并将它们保存在状态中。问题是，我有一个RequiredAuth组件，它检查试图访问特定路由的用户是否经过身份验证，通过检查状态中是否有access_token，它可以正常工作，除非我在经过身份验证时重新加载该页面，然后重定向到我的登录页面<Navigate to="/auth/login" state={
浏览 16提问于2022-11-21得票数 -1
我是应用程序使用基于令牌的身份验证使用JwtHelper，通过canActivate方法验证路由器更改并重定向到登录页面。
但在令牌过期或删除本地存储后，页面不会重定向到登录页面。
浏览 3提问于2017-11-09得票数 0
在需要将该信息存储在状态之前，我希望从当前屏幕中删除查询param ?error=true。但是，如果使用props.history.replace，则当前组件的状态信息将丢失。是否有任何方法可以移除查询参数，而无须使用react路由器重新呈现？
浏览 0提问于2020-05-11得票数 0
回答已采纳
我正在构建一个Express-React-Node应用程序，我希望将其部署到Google app Engine上。这是App.jsx文件： import React from 'react';
<div className='app'>This is a React@16/umd/react.development.js"></script>
浏览 22提问于2019-09-14得票数 0
回答已采纳
我正在创建一个react-app。这是一个跟踪一些存储数据的网站。目前，我正在努力保护路由，这样用户就不能通过输入页面的url直接访问它。import React, { Component } from 'react' </div>
<&#x
浏览 5提问于2019-06-25得票数 0
/reportWebVitals'; import ReactDOM from 'react-dom';import { useNavigate } from 'react-router-dom';
export default functionnavi
浏览 3提问于2022-01-14得票数 2
回答已采纳
1回答
我目前有一个Express后端，它为用户提供登录页面，这是React的一部分。dashboard");});});
GET路由服务于我的React.js文件，其中包含基于Redux状态的“公共”和“私有”路由。<em
浏览 1提问于2019-04-23得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
