使用localStorage在React JS中存储当前登录的用户数据
在React JS中使用localStorage存储当前登录的用户数据是一种常见的做法。localStorage是浏览器提供的一种本地存储机制，可以将数据以键值对的形式存储在用户的浏览器中。
优势：
- 持久性存储：localStorage中的数据会一直保存在用户的浏览器中，即使用户关闭了浏览器或重新打开页面，数据也不会丢失。
- 简单易用：localStorage提供了简单的API，可以方便地进行数据的存储和读取操作。
- 安全性：localStorage中的数据只能被同源的网页访问，其他网页无法直接读取或修改其中的数据，因此可以保证数据的安全性。
应用场景：
- 用户登录信息：可以将用户的登录信息（如用户名、用户ID等）存储在localStorage中，以便在用户刷新页面或重新打开网站时能够保持用户的登录状态。
- 用户偏好设置：可以将用户的偏好设置（如主题、语言等）存储在localStorage中，以便在用户下次访问网站时能够自动应用用户的偏好设置。
- 本地缓存数据：可以将一些需要频繁读取的数据（如文章列表、商品列表等）存储在localStorage中，以减少对服务器的请求，提高网页加载速度。
在React JS中使用localStorage存储当前登录的用户数据的示例代码如下：
// 存储用户数据
localStorage.setItem('userData', JSON.stringify(userData));
// 读取用户数据
const userData = JSON.parse(localStorage.getItem('userData'));
// 删除用户数据
localStorage.removeItem('userData');腾讯云相关产品推荐： 腾讯云提供了一系列与云计算相关的产品和服务，以下是一些与localStorage存储相关的产品推荐：
- 云存储 COS（Cloud Object Storage）：腾讯云的对象存储服务，可以用于存储和管理大规模的非结构化数据，包括图片、音视频、文档等。详情请参考：腾讯云COS产品介绍
- 云数据库 CDB（Cloud Database）：腾讯云的关系型数据库服务，可以提供高可用、可扩展的数据库存储和管理能力。可以将用户数据存储在云数据库中，以实现更高的数据安全性和可靠性。详情请参考：腾讯云CDB产品介绍
请注意，以上推荐的产品仅作为参考，具体选择应根据实际需求和项目情况进行评估和决策。
相关·内容
3回答
我有一个简单的。我定义了几条路线，其中之一就是登录。用户在Login组件中成功登录后，我希望在顶部菜单中显示他的用户名。我使用localStorage来存储值，并且我希望当值发生变化时，它会自动更新。但是，我需要刷新页面以查看更改。我遗漏了什么？
这是主要应用程序组件的代码：
import React, { Component } from 'react';
import {
BrowserRouter as Router,
Route,
Link,
Redirect
} from 'react-router-dom'
浏览 0提问于2019-08-17得票数 1
回答已采纳
我正在尝试实现受保护的路由，这些路由只有在用户登录后才能访问。 基本上，有两条路线： 登录组件(公共)和 仪表板组件(受保护)。在用户单击 按钮输入 ，则调用一个API，该API返回一个 ，然后将其存储在localStorage中。The The The HOC检查令牌是否存在于localStorage中，并相应地重定向用户。 在单击 按钮，它只是重定向回登录页面，而不是将用户带到 ..。不确定逻辑出了什么问题。 它只是一个基于promise的localStorage操作的辅助方法。 App.js import { useEffect, useState } from "react&
浏览 42提问于2021-02-24得票数 0
回答已采纳
当用户登录时，我想显示userName，并在Navbar(nav组件)中从“登录”中将按钮文本更改为“注销”。我厌倦了通过将路由器历史位置推送到用户登录的主页来重新呈现Nav组件。
this.props.history.push('/')
然后用户可以成功登录，将用户数据保存在localStorage中，并改变路由器的位置。数据保存在localStorage中，但组件不重新呈现.
这是我尝试过的。
试图将“连接-反应-路由器”降级为“v6.0.0”，但它给我带来了一些错误。所以把它放回最新版本'^6.4.0‘。
尝试在作为父组件的App.js中添加Navbar代
浏览 0提问于2019-05-29得票数 0
回答已采纳
1回答
我使用express + mongodb + redis + mongoose作为后端来提供api.
并且，使用react + react-router + redux作为我的前端.
身份验证基于sessionId + cookie。
对于前端，我使用react-router和onEnter钩子进行身份验证控制。当用户成功登录时，我将用户信息从后端保存到redux存储中。就像这样：
const auth = { username: 'novaline', isLogin: true};
到目前为止一切都很好。
问题是：当用户重新加载页面时，存储在redux存储中的数据被删除。是
浏览 1提问于2017-08-29得票数 2
回答已采纳
我想要反应，以了解是否有用户登录。
我正在使用passport-github，目前用户可以登录。但是，react不知道谁登录了，我想要react来检查用户是否经过身份验证。
我想知道一种如何反应来捕获集合令牌并将其保存到localStorage中，并将其用作查看用户是否已登录的一种方式。
我对如何在反应中做到这一点有一个模糊的想法。
例如，如果
token != null
登录用户
routes/users.js
router.get('/auth/github', passport.authenticate('github', { session: true
浏览 4提问于2019-02-11得票数 0
回答已采纳
在登录到应用程序(React.js)之后，我在localStorage中缓存member数据，因为我的许多组件都在使用它，理想情况下，请求只需要在登录时完成。
但是，这个member对象中的一些属性可能会在后端手动更改，因此前端无法知道member对象是否发生了更改。(在理想情况下，对member对象的任何更改都应该通过某种表单提交来直接更改DB，这样就可以为localStorage触发更新，但此时这不是一个选项。)
示例场景:应用程序中有一个通用表单来请求额外的学分。客户服务将收到一封关于该请求的电子邮件。信用将手动更新客户A( DB)。如果客户A不重新登录(完成了对member的get请求
浏览 5提问于2019-10-31得票数 0
回答已采纳
我有一个专用的路由组件，我在我的应用程序中使用。
import React from 'react';
import { Route, Redirect } from 'react-router-dom';
import PropTypes from 'prop-types';
const PrivateRoute = ({ component: Component, ...rest }) => {
const userLoggedIn = localStorage.getItem('token');
浏览 2提问于2019-08-19得票数 0
回答已采纳
我正在使用本地存储在react js中建立一个会话。 登录页面中的localStorage.setItem("token", response.data.token);//在本地存储中设置token 在类componet中，如果token存在，则显示数据 componentDidMount() {
const config = {
headers: {
Authorization: `token ` + localStorage.getItem("token"),
},
};
axios
.g
浏览 11提问于2021-09-29得票数 1
2回答
使用后端node.js，我已经创建了一个具有过期时间的JWT令牌：
signToken = (user) => {
return jwt.sign({ id: user.userId }, process.env.JWT_SECRET, { expiresIn: 60 * 60 * 24 * 10 }) // 1h = 60 * 60
}
使用前端React应用程序，当用户登录时，我将传递这个带有返回数据的JWT令牌，并将其保存到本地存储(我正在使用Redux)：
const result = await userLogin({ username, password })
dis
浏览 1提问于2020-12-08得票数 0
我在app上使用Node JS，JWT和Sequelize for the API进行身份验证，我使用React JS / redux作为前面的部分。我已经成功地实现了应用程序的登录/注销/注册部分，但是现在我需要访问登录的current_user。 我在localStorage中放置了一个JWT，但我希望能够访问用户ID、用户电子邮件、用户名和有关当前登录的用户的更多信息。 我应该使用Cookie吗？LocalStorage？或者我应该在我的应用程序接口中创建一个currentUser方法？ 如果有人能帮我找到一些有用的资源或建议，我对此有点迷惑！ 谢谢！
浏览 57提问于2017-11-12得票数 3
回答已采纳
1回答
页刷新时，防火墙身份验证将消失。
、、、、
我有一个简单的反应应用程序使用防火墙身份验证。成功登录后，firebase:authUser存储在localStorage中。但是在每次刷新页面时，localStorage都会被清除，会话也会丢失。不过，浏览其他页面并不能清除localStorage。
下面是代码中的内容：
Index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import
浏览 4提问于2021-11-07得票数 4
回答已采纳
1回答
在localStorage中存储用户用户名是安全/合理的，还是在用户登录时存在反应状态？
我目前有一个简单的<Login/>表单，它只在用户未登录时呈现和显示。当用户登录时，将从服务器发送一个jwt令牌，该令牌存储在localStorage中，并保存在<App/>中的一个反应状态中。
如果在React状态' token‘中没有令牌，则组件呈现，但是如果存在令牌(意味着登录用户，则令牌被设置为React状态和本地存储)，我希望使用组件来呈现而不是呈现。
在我的应用程序中，我正在使用react路由器-dom来处理路由。
我的主要问题是，是否应该将用户名与令牌一起发送
浏览 3提问于2022-07-27得票数 -1
1回答
这里我有一个代码的一部分，在其中我需要登录到应用程序，并且我将令牌存储在本地和会话存储中，这样它就可以在卸载事件期间处理，存储在会话中将有助于刷新和本地共享多个选项卡的数据，这样我就不必每次打开一个新选项卡时登录。
但是我面临的问题是-
当我登录到应用程序时，如果我在加载新选项卡时打开一个新选项卡，我可以看到应用程序被登录，但是当我刷新它回到登录页面时，我检查了会话存储中没有令牌，所以在刷新页面时它正在注销。
我需要的解决方案是-
如何从已登录选项卡的会话存储中获取数据并将其发送到所有新打开的选项卡中，我已经看到了类似于我们可以存储事件或广播API之类的东西，但是我真的不知道如
浏览 6提问于2022-05-23得票数 0
我正在使用react、redux和redux-persist实现一个登录表单。登录API已经从后端团队准备好了.该表单有一个“记住我”复选框，我希望从登录响应中持久化JWT令牌。
我认为实施“记住我”的正确方法是：
如果没有选中“记住我”，则应该将令牌持久化到sessionStorage。因此，当浏览器关闭时，用户应该再次登录，但不需要在切换选项卡或刷新当前页面上登录。
如果选中了令牌，则应该将令牌持久化到localStorage。即使浏览器关闭，用户仍然登录。
现在我知道，从后端的角度来看，只有令牌到期时间。
我的第一个问题是我的客户端的观点和方法是否正确。
如果是，我如何根
浏览 0提问于2019-05-12得票数 8
我有一个应用程序，您可以在其中注册和登录。我将所有用户存储在useState中，它位于App.js中(最初有三个用户)。如果一个新用户注册了，那么我将他的数据存储在localStorage中，这样当应用程序重新启动时，他们就会在我的UseState App.js中，这就是问题所在。如果您在一个会话中工作，那么一切都可以正常工作:注册之后，我可以轻松地登录到一个新帐户，不管我创建了多少个帐户(数据是用localStorage正确写入的)，但是一旦我重新启动应用程序，那么在App.js From localStorage中，来自localStorage的最后一个对象就会出现，尽管如果我在控制台中显
浏览 6提问于2022-06-17得票数 0
回答已采纳
2回答
遵循丹·阿布拉莫夫在localStorage中存储状态的方法，在执行页面刷新后，我无法保留我的应用程序的现有状态。使用redux dev工具，当我登录时，会验证状态并存储用户。当页面刷新时，日志就会清除并返回到"@@INIT“
我的index.js代码
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware, compo
浏览 0提问于2018-02-15得票数 0
我正在用React和Node.js (Express)开发一个小笔记应用程序。如果用户通过了身份验证，我会对后端进行API调用，以获取、创建、更新、删除保存在MongoDB数据库中的笔记。如果他没有，笔记将存储在localStorage中。我有一个具有登录、注销和注册功能的AuthContext。我可以通过我的AuthContext中的useAuth()定制钩子知道用户是否是loggedIn用户： const { user } = useAuth(); 我有一个单独的文件来调用我在我的组件(getNotes，createNotes ...)中使用的API。 我在useEffect钩子中获取我
浏览 12提问于2021-07-14得票数 3
我学到了一点反应。现在是用户登录的时候了。但有个问题。首先，代码：
App.js
import React, {useState} from "react";
import { BrowserRouter as Router, Link, Route } from "react-router-dom";
import PrivateRoute from './PrivateRoute';
import Home from './Home';
import Login from "./Login";
import
浏览 3提问于2020-01-16得票数 2
回答已采纳
与标题一样，当我在React/Redux应用程序中重新加载页面时，用户将退出。我将令牌存储在localStorage中，但它不起作用，所以可能有任何错误。当用户登录时，应该存储令牌。注销工作正常。这是我的代码：
auth.js (reducers目录- Redux)：
import { LOGIN_SUCCESS, LOGIN_FAIL, LOGOUT_SUCCESS, REGISTER_SUCCESS, REGISTER_FAIL } from '../actions/types';
const initialState = {
token: localStorage.
浏览 4提问于2020-06-29得票数 1
回答已采纳
我已经像这样实现了我的应用布局：
const Layout: React.SFC<IDefaultProps> = props => {
const { component: Component, ...rest } = props;
const logged = userServices.getUserLocalStorage();
return (
<Route
{...rest}
render={matchProps =>
logged != null ? (
<div c
浏览 41提问于2018-06-16得票数 0
回答已采纳
2回答
登录后，我需要导航回原始请求的URL。
例如，当用户未经身份验证时，用户输入，它将导航到登录页。
一旦通过身份验证，它应该自动导航回
我的protectedRoute.js看起来像这样
import React from 'react'
import { connect } from 'react-redux'
import { Navigate, Outlet, useLocation, useNavigate} from 'react-router-dom'
export const withRouter = (Component) =
浏览 3提问于2021-12-18得票数 3
回答已采纳
大家好，我在我的react项目中有一个JWT身份验证，我想做一个函数来检查用户是否登录了。我的登录函数如下：
export function login(data) {
const endpoint = '/api/auth/jwt/'
const csrfToken = cookie.load('csrftoken')
let thisComp = this
if (csrfToken !== undefined) {
let lookupOptions = {
method: "POST
浏览 1提问于2018-06-12得票数 0
*以下是两页登入，并附有受保护及部分密码。在登录后生成令牌，如果用户获得令牌，那么只有用户才能看到仪表板页面。但我一直面临错误，即"SyntaxError: JSON.parse: JSON数据第1列中的意外字符“
视图源
function Protected(props) {
5 | const Cmp = props.cmp
>7 | var Auth =JSON.parse(localStorage.getItem('auth'))
| ^ 8 | console.log(Auth)
视图编写了
5623 | fun
浏览 2提问于2020-12-24得票数 1
回答已采纳
1回答
Okay...what在这里发生是因为我不害怕吗？我有一个来存储当前的用户数据。在登录函数中，我控制台记录currentUser，一切看起来都很好，但是当我用chrome工具编写currentUser时，它似乎没有定义。在localStorage中，我也有数据。这是怎么回事？我做错了什么？有人能帮帮我吗。
这是我的代码：
authContext.js
import { createContext, useState, useEffect } from "react";
import axios from "axios";
export const A
浏览 3提问于2022-11-26得票数 0
回答已采纳
我正在使用一些普通的utils来与API进行通信。
在初始页面加载时，我希望从本地存储中读取一些令牌，然后向API请求获取数据。
我有一个用于与LocalStorageUtils.js交互的window.localStorage库。我的容器组件处理所有登录/注销操作，并在页面加载时读取当前用户。
App.js
componentWillMount() {
LocalStorageUtils.get('user');
}
LocalStorageUtils读取该值并通过类似于的ServerAction将其带入。
get(key) {
var value = window.
浏览 10提问于2015-06-25得票数 0
回答已采纳
我试着为一个反应应用程序创建一个用户区域，
如果用户登录，则数据存储在“userData”下的redux中，
我遇到的问题是，如果当用户没有登录时，suer会对用户区域进行访问，我希望应用程序将它们重定向到另一个“notloggedin”页面，
我有以下内容，但是我遇到的问题是，当路由第一次呈现时，userDetails返回一个空对象，该对象随后触发history.push('/notloggedin')。我可以看到是否删除history.push('/notloggedin')并在第一次加载组件时将其作为空对象加载userDetails，然后将重命名器加载为填
浏览 2提问于2020-11-15得票数 2
回答已采纳
上下文:我有一个<Header />组件，它有一个按钮将用户重定向到<SignIn />组件。始终显示<Header />组件，但是当用户登录时，Login按钮消失并被用户名替换。
我将不详细介绍身份验证机制，但让我们简单地说它是基于存储在localStorage中的JWT的。为了读取cookie并确定是否显示登录按钮，我在<Header />中有以下代码：
componentDidMount() {
const token = localStorage.getItem("token");
if (token)
浏览 0提问于2018-08-03得票数 0
回答已采纳
我在我的AngularJS应用程序中使用Hello.js来让用户在Facebook上进行身份验证。一旦用户登录，并且我从Facebook获得了用户信息，我就使用json并从我自己的数据库中获取user对象，并将其存储在根作用域中，这样我站点中的各个区域就可以访问该用户的配置文件信息(例如，在我显示登录用户名的标题中)。
下面是处理身份验证内容的服务
angular.module('myApp')
.factory('userService', function($rootScope, $location) {
// Hello.js Function
浏览 5提问于2014-10-07得票数 4
我正在开发一个具有会话持续时间的用户身份验证的React应用程序。登录时，响应将为userObject提供会话持续时间。我正在使用loggedUser redux持久化对象--在localStorage中持久化。我使用react-idle-timer来使用sessionDuration检测在loggedUser对象中获得的标签空闲。当用户空闲到达超时时，我将清除localStorage结果用户注销。
以下是我面临的问题：
流完全适用于单个选项卡。当用户使用多个选项卡时。我在第二个选项卡中打开一个页面，loggedUser数据将使用localStorage共享，这里我正在积极地使用该页面。但是第
浏览 1提问于2021-03-13得票数 1
在submit (index.html)上，我需要执行以下ajax来将用户数据保存到localStorage，因为我将重定向到另一个<code>E 110</code>路由<code>E 211</code>，它将不具有<code>E 112</code>data<code>E 213</code>，除非。这一切都很好，但是当我在一个新的localStorage本地主机窗口和I登录打开页面时，中的旧数据就会被覆盖。
为什么会发生这种事？
// Login index.js
$('#frm-
浏览 2提问于2018-05-18得票数 0
回答已采纳
在react应用程序中，我使用了一个表单来插入数据，而使用express JS，我将这些数据发布到mongo。当用户登录时，可以使用表单插入数据。还有一个页面，用户可以在其中查看和删除插入的数据。问题是如何加载特定用户插入的数据？
浏览 6提问于2022-05-10得票数 0
回答已采纳
在这段代码中，我根据用户登录的条件使用 (如果用户信息存储在本地存储中)，除了登录组件外，我正在呈现navbar组件。但是在成功登录之后，在各自的组件中，在第一次路由时，它不是显示在顶部的导航栏，而是只显示在我刷新页面时。组件在下面。谢谢Index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from
浏览 3提问于2021-08-09得票数 0
3回答
我想要的是显示的主页，只有当用户以前登录，没有注销。但用户之前是否注销，然后显示loginpage。我将auth状态保存到本地存储，如下所示: key:auth，value:true/false。根据auth值，我希望呈现起始页。
这是我的App.js：
import "./App.css";
import "bootstrap/dist/css/bootstrap.min.css";
import Signup from "./Components/Signup";
import Login from "./Components/Log
浏览 7提问于2022-03-18得票数 1
回答已采纳
问题如下。将数据输入注册/登录表单后，react将请求发送到服务器，作为响应，它获取jwt-令牌并将其放入localStorage。但是如何与令牌进一步交互，需要对令牌进行解密呢？例如，当我想要获得用户的角色(这个角色被放入令牌中)，并根据角色分别呈现页面时，我需要从令牌中获取数据。同样，要获取此数据，令牌将在客户端解密？(React)
浏览 1提问于2021-10-19得票数 0
回答已采纳
我想将用户重定向到登录工作流之前他所在的当前页面。
用户想去/profile
页面受到保护；用户被重定向到/login。
使用重定向到/callback的auth0-js登录工作流
我希望回调页将用户重定向到/profile页面
是否有可能将附加信息传递给auth0-js (例如{from: '/profile'})？
以下是我在react应用程序中对Auth0-js的初始化：
auth0 = new auth0.WebAuth({
domain: 'xxx.auth0.com',
clientID: &#
浏览 0提问于2018-02-25得票数 1
回答已采纳
我使用localStorage在登录时保存用户数据。我已经将其命名为"jwt_data“。我已经在saperate js文件上创建了一个函数来检索数据，如下所示 export const auth = () => {
if(localStorage.getItem('jwt_data')){
return JSON.parse(localStorage.getItem('jwt_data'))
}else{
return false
}
} 我在react上有一个带有<徽标，搜索栏，dropdown>的导航
浏览 62提问于2021-11-07得票数 4
回答已采纳
1回答
我用的是React和Graphql以及阿波罗。
我的index.js如下：
const client = new ApolloClient({
uri: GRAPHQL_URL,
fetchOptions: {
credentials: 'include'
},
request: (operation) => {
const token = localStorage.getItem(AUTH_TOKEN_KEY) || "";
operation.setContext({
浏览 0提问于2020-05-04得票数 0
我经常在react应用程序中经过身份验证的组件上使用localStorage，以便从本地存储中获取用户详细信息，并在登录时存储它们。
当我构建我的应用程序时，它抛出ReferenceError: localStorage is not defined。
我知道这可能是因为节点没有访问localStorage的权限，因此出现了错误。
我该如何解决这个问题？
下面是我在组件中使用的代码示例。
import React, {PropTypes} from 'react';
import AccountBasicInfo from '../components/AccountB
浏览 10提问于2016-08-10得票数 6
1回答
我对mongoDb完全陌生，我想知道是否有一种方法可以将localStorage数据存储到mongoDb集群中？另外，我们可以同时使用mongoDb和localStorage来存储应用程序数据吗？我已经使用localStorage创建了一个小应用程序(html-css-js)来存储数据，现在我想知道是否可以使用mongoDb进行用户登录，如果是经过验证的用户，我可以将他重定向到localStorage运行的应用程序。
浏览 35提问于2021-11-08得票数 0
2回答
从二级域到子域的反应路由
、、、
在我的React站点上有一个登录页面，其中包含这个url (本地)。
当用户登录时，服务器返回一堆关于用户的信息，包括一个公司列表，每个公司都有一个子域元素。所有这些数据在登录时都会被放入localStorage中。
我在这里的目标是，当用户登录到站点时，他们将立即被重定向到主页，但是有一个子域匹配他们从服务器返回的公司列表中的第一个公司。
这就是到目前为止的情况：
这个文件是一个全局实用程序文件，我将把它导入登录页面：
const getSubdomainHref = function() {
const storedUser = JSON.parse(localStorage.g
浏览 14提问于2022-06-19得票数 1
回答已采纳
下午好,
在完成了React教程并阅读了所有的React指南之后，我完成了Redux教程来重写我的working auth组件，以使用Redux而不是组件状态(我还从类切换到了功能性组件)。
我的Redux设置如下：
import { createSlice } from '@reduxjs/toolkit';
const sessionInitialState = {
authToken: null,
userLogin: null,
};
export const sessionSlice = createSlice({
na
浏览 1提问于2020-09-19得票数 0
回答已采纳
我正在尝试实现一个SSO react-admin登录
大多数react-admin示例都是简单的用户名/密码登录和获取令牌，然后存储在存储中。但对我来说，token将从Auth提供者服务器返回并重定向到，然后让react-admin解析URL，并在localStorage中设置token。然后更新React admin store，将用户标记为“已登录”。
但对我来说，在从app main js验证了token之后，我无法模拟作为钩子登录，你能帮我怎么做吗？
浏览 18提问于2019-10-26得票数 1
回答已采纳
1回答
我正在使用react和Next.js开发一个web应用程序，我还有一个Node.js API作为后端分离。
我有一个登录表单，将数据发送到API以恢复JWT，当我这样做时，一切正常，但是在将用户重定向到受保护的路由“仪表板”之后，或者在刷新用户上下文之后，用户上下文就会丢失。
以下是受保护的路线：
import React, {useContext, useEffect} from 'react'
import { useRouter } from "next/router";
import { Context } from '../../context
浏览 39提问于2022-10-21得票数 0
回答已采纳
1回答
React不能从其他组件中使用
、、、、
我创建了一个node.js服务器，我可以将用户信息写入MongoDb，我可以在postman中创建JWT。所以我想把这个用在react项目上。
我创建了带有私有路由的react路由器，它正在检查本地存储中是否有任何用户信息。示例，(我没有为登录api创建axios。我只想用硬代码编写用户信息，以确保代码正常工作)
import { useAuth } from "../Context/AuthContext";
import { Navigate,useLocation } from "react-router-dom";
export default fun
浏览 4提问于2022-08-28得票数 0
回答已采纳
1回答
在我的React项目中，我使用Firebase身份验证实现了身份验证。成功登录后，用户详细信息将存储在localStorage中的“user”对象中，并保持存储状态，直到用户真正注销。它是这个'user‘对象的存在，用于检查此人是否经过身份验证，然后随后打开受保护的路由。
但是，这种方法会导致一个问题，即用户可能会从localStorage复制用户详细信息，然后使用控制台手动设置它们。这将导致该用户在没有使用其密码进行身份验证的情况下登录。
那么，在React中实现身份验证持久性的正确且安全的方法是什么呢
浏览 15提问于2021-06-13得票数 0
我是localStorage的新手，我的目标是:当用户登录时，将他重定向到"/dashboard“，当他被注销时，重定向回'/home‘。当然，如果他没有登录，当然也不允许他去“仪表板”。由于某些原因，我在App.js中的代码无法工作：
function App() {
let userLogged;
useEffect(() => {
function checkUserData() {
userLogged = localStorage.getItem("userLogged");
}
window.ad
浏览 6提问于2022-06-01得票数 2
回答已采纳
1回答
我正在构建一个React web应用程序。它在用户通过第三方Oauth2服务登录后将令牌存储在本地存储中。
当用户注销时，localstorage.clear()确实清除了令牌。
Storage {length: 0}
然而，如果我点击浏览器的后退按钮几次，我回到了应用程序中，令牌重新出现在本地存储中，就像我以前从未注销过一样。
我试过了：
localstorage.clear(), localStorage.removeItem('accessToken'), location.reload(true) ...
如何清除存储空间和历史记录？
浏览 1提问于2018-06-14得票数 0
2回答
我已经创建了一个服务类，用于在React应用程序中处理身份验证。有关当前登录用户的数据存储在用户上下文中。当用户单击注销按钮时，将在身份验证服务中调用logout()。然后，可以使用this.context.updateUser()在相同的单击事件中重置用户上下文。 但是，有时用户需要注销，即使他们没有单击注销按钮，例如，如果他们的会话无效。在这种情况下，将从身份验证服务内部调用forceLogout()。但是，因为这不会发生在组件中，所以我没有办法重置用户上下文。当前代码显示错误：Error: Invalid hook call. Hooks can only be called insi
浏览 25提问于2020-09-17得票数 1
回答已采纳
我正在构建一个React应用程序，其中许多react应用程序的内容都是从localStorage中提取出来的。而不是使用数据库，当应用程序运行时，第一件事是用数据填充localStorage，然后使用来自localStorage的数据从JS构建HTML .
但是现在使用React，我开始从硬编码信息到从localStorage使用它。但是，似乎在加载localStorage的JS之前呈现了react组件。使用console.log，我发现反应呈现比其他任何事情都要早。在完成构建localStorage的JS之前，我如何确保HTML (来自react组件)没有实现？
主应用程序组件
class
浏览 2提问于2018-07-20得票数 0
3回答
我有以下问题:我有一个react类(dashboardContainer)，只有当用户登录时，它才是可见的。这个类(dashboardContainer)由其他类(授权)扩展，授权类检查用户是否登录，如果数据不处于状态，则获取用户数据。这两个类都使用react连接，但是当我执行它时，它会引发下一个错误：
Uncaught :无法读取未定义的DashboardContainer.Connect (connectAdvanced.js:122)、新DashboardContainer (DashboardContainer.jsx:57)、measureLifeCyclePerf (ReactC
浏览 5提问于2017-10-15得票数 3
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
