如何在react+node web应用程序中实现会话和注销？
在React+Node Web应用程序中实现会话和注销，可以通过以下步骤实现：
- 会话管理：
- 在Node后端使用express-session中间件来管理会话。该中间件可以将会话数据存储在服务器端，并为每个客户端分配一个唯一的会话ID。
- 在用户登录时，将用户信息存储在会话中，可以使用session.user = userInfo的方式。
- 在后续的请求中，可以通过req.session.user来访问会话中的用户信息。
- 注销功能：
- 在前端React应用中，创建一个注销按钮或链接，当用户点击注销时，触发注销操作。
- 在React组件中，通过调用后端API来清除会话数据。可以使用axios或fetch等库发送HTTP请求。
- 后端接收到注销请求后，通过删除会话中的用户信息来实现注销操作。可以使用delete req.session.user的方式。
- 实现会话和注销的示例代码：
- 后端Node代码示例：
- 后端Node代码示例：
- 前端React代码示例：
- 前端React代码示例：
这样，通过以上步骤，你可以在React+Node Web应用程序中实现会话和注销功能。请注意，以上示例代码仅为演示目的，实际应用中可能需要根据具体需求进行适当的修改和完善。
相关·内容
1回答
当在路由中调用函数时，响应而不是重定向
javascript、reactjs、react-router-dom
我正在为我的一个反应项目建立一个登录和注销系统。我有一个导航栏设置，我正在使用react-redirect-dom创建链接和重定向到不同的页面，以管理登录系统。
在当前项目中，我有一个在登录组件中对登录进行处理的路由。我有另一个链接，处理注册组件内的注册。
对于注销，如果用户登录并使用/logout端点，我希望它立即调用handleLogout函数，并将用户注销并重新路由到/端点。
下面是我的代码和错误：
function App() {
const [loggedIn, setLoggedIn] = useState(false)
const [currentUser, setCu
浏览 7提问于2022-01-15得票数 1
回答已采纳
2回答
每当我更改服务器上的任何内容时，req.session.user都会未定义，并且在第一次从前端调用时，就会正常工作。
node.js、reactjs、use-effect、express-session
我的代码可以工作，但每当我在server.js中进行更改时，req.session.user就会变为未定义。
这也发生在我第一次从前面提出请求时，我确实得到了认证。但是就在我没有得到user.name和cookie之后，因为它读起来没有定义。
如果我再次运行它，它就会正常工作，直到我退出服务器并重新启动为止。它重复相同的模式，第一次不起作用，然后起作用。
我认为与后端相关，因为后端的任何更改都会导致session.user未定义，
server.js
const express = require("express");
const session = require("
浏览 8提问于2022-09-01得票数 0
1回答
如何在node js，react js，sql中使用session以表格的形式显示登录用户的详细信息？
javascript、sql、node.js、reactjs、express
This the view page where user details are redirected 大家好，目前我正在从事一个项目，其中有两个表单登录和用户详细信息表单。当用户登录并填写详细信息表单后，它会将其重定向到查看页面，在那里他/她可以查看、编辑、删除他/她的记录。但是当用户登录时，应该只看到他的记录。在我的例子中，它获取视图页面中的所有记录。我在node js中使用了session。我不知道哪里出了问题。 服务器代码 const express = require("express");
const app = express();
const cors =
浏览 18提问于2021-09-10得票数 0
2回答
为什么我不能将我的会话存储在Express.js (MERN )中？
reactjs、express、mern
我一直在尝试为我的express.js文件在会话中存储用户的电子邮件。但是每次我尝试一些东西，并调用另一个函数时，会话仍然是未定义的。几个星期来一直在研究这个问题，但我似乎找不到答案。
server.js文件：
import express from 'express';
import cookieParser from 'cookie-parser';
import session from 'express-session';
const app = express();
app.use(cookieParser());
app.use(se
浏览 17提问于2022-01-22得票数 0
2回答
我的会议怎么了？
javascript、node.js、reactjs、http、cookies
因此，我终于部署了我的应用程序，解决了所有的CORS问题，但我在用户认证方面遇到了问题。我可以登录，但是当我刷新一个站点时，我会在Mozilla之外的所有浏览器上自动注销->，它在那里工作。
userContext.js ->前端
//XXX Login
const login = () => {
Axios.post(`${apiUrl}/users/login`, {
userName: nameLog,
userPassword: passwordLog,
}).then((response) => {
浏览 6提问于2021-01-24得票数 0
回答已采纳
2回答
如果用户已登录，如何将用户重定向到页面
node.js、reactjs
我曾尝试在/dashboard上使用useEffect检查用户是否为loggedIn，但在将用户重定向回/login页面之前，它会显示仪表板消息。 /dashboard function Dashboard() {
return (
<div>
This is Dashboard page.
</div>
);
}
export default Dashboard; /login const login = (e) => {
e.preventDefault();
浏览 22提问于2021-06-23得票数 0
1回答
将onChange函数响应到LogIn不工作
javascript、reactjs、react-native、axios
我已经在这上面呆了10个小时了，说我不知道我错过了什么，这是令人沮丧的。
我正在用注册和登录函数制作一个简单的react应用程序，我已经成功地创建了mypage，并且注册了，这里有两件事我想实现，但无法完成：
1.它应该在登录后被称为handleResponseSuccess回调
2.当按钮单击时，它应该成功地登录
即使简单地指出一点也会有很大的帮助。谢谢
App.js
import React from "react";
import { Switch, Route, Redirect, withRouter } from "react-router-dom"
浏览 1提问于2021-01-25得票数 1
1回答
总是在刷新时从app中的任何路径重定向到主页。
javascript、reactjs、react-router-dom、page-refresh
我使用的是功能组件，它通过服务器端身份验证和本地存储为特定的路由(如/home )提供身份验证，在我的登录页面的OnSubmit事件中发生。
一切都很好，我在成功登录后被重定向到主页，当我从总是被重定向到主页的任何路径刷新页面时，问题就会出现，为什么会这样？
在production和development中出现的问题，请给我一个解决方法。
我的App.js文件是
App.js
import React, { useState, useEffect } from 'react';
import Swal from 'sweetalert2';
import
浏览 1提问于2021-04-16得票数 4
回答已采纳
1回答
在浏览器中存储express.js会话(MERN堆栈)
mongodb、express、mongoose、mern
我一直在尝试为我的express.js文件在会话中存储用户的电子邮件。但是每次我尝试一些东西，并调用另一个函数时，会话仍然是未定义的。我只想将其存储在浏览器中，而不将每个会话存储在数据库中。几个星期来一直在研究这个问题，但我似乎找不到答案。
server.js文件：
import express from 'express';
import cookieParser from 'cookie-parser';
import session from 'express-session';
const app = express();
app.use
浏览 2提问于2022-01-27得票数 0
1回答
根据前端应用程序的请求快速处理新会话
node.js、reactjs、express、session、cookies
我正在创建一个登录页面，问题是每次请求来自前端应用程序时，都要快速创建一个新会话。我已经检查并尝试了所有其他的答案在网上和这里。最让我困扰的部分是它与curl一起工作，而不是通过前端应用程序。下面是代码: server.js
const bodyParser = require('body-parser');
const cors = require('cors');
const session = require('express-session')
const cookieParser = require('cookie-parser
浏览 1提问于2019-01-06得票数 0
1回答
react中的函数已登录，无法正常工作
reactjs
我开始学习和练习React，我的想法是制作一个登录屏幕，在那里我调用rest api并将用户存储在内存中，当登录时我将用户重定向到Home。问题是，我希望，如果用户登录，应该不能看登录屏幕。为此，我将"isLogged“状态发送到"login”组件，如果用户具有“login”状态，我希望将其重定向。问题是状态不正确： app.js import React, { Component } from 'react';
import { BrowserRouter as Router, Route } from 'react-router-dom'
浏览 10提问于2020-10-31得票数 2
回答已采纳
2回答
无法从react请求中检索cookies
node.js、reactjs、cookies
下面是我的react代码：
axios.get('http://localhost:5000/check').then(() => {
axios.post('http://localhost:5000/cookie', null, { withCredentials: true });
});
后端节点js：
import express, { Application, Request, Response } from 'express';
import cors from 'cors';
import
浏览 2提问于2020-11-13得票数 0
1回答
为什么我的"req.session“不创建一个会话？
node.js、session、axios、express-session
我目前正在React/Express中创建一个应用程序，我正在学习如何创建会话。我正在使用快速会话，因为这是每个人推荐的，但我有意想不到的行为。
在我的路由帖子(连接期间使用的路由)中，我尝试为用户创建一个新会话，但它似乎不起作用(没有cookie，会话也没有创建)，而我的console.log返回预期的信息。
router.post('/login', async (req, res) => {
const user = await Users.findOne({where: {Email: req.body.Email}})
if (!user) re
浏览 4提问于2022-10-16得票数 0
回答已采纳
2回答
使用express设置和检索会话中的数据
node.js、express、session
我正在用node.js和express构建一个小的应用程序。在此应用程序中，后端有两个路由，一个用于用户，另一个用于用户可以添加的bug。 我的目标是在使用sessionExpress的会话中保存用户，然后在系统中添加bug时检索它。 我的代码： app.get('/api/login',(req,res)=>{
const user = req.body
userService.checkLogin(user)
.then(user=>{
req.session.user = user
res.s
浏览 10提问于2019-03-08得票数 0
1回答
不使用azure数据库的node.js登录
sql、node.js、reactjs、azure
所以我有一个天蓝色的sql数据库，我让寄存器工作，并使用node.js将字段添加到数据库中，并将其作为我的前端。我试图让我的登录工作，我设置相同和相同的前端就像我的寄存器，但它不断返回错误的用户名或密码，当它是正确的。有人能帮我告诉我我做错了什么吗？
const express = require("express");
const cors = require("cors");
const app = express();
app.use(express.json({
type: ['application/json', 't
浏览 10提问于2022-04-12得票数 1
1回答
如何通过链接next.js传递方法道具？
reactjs、next.js、react-props
我有导航栏组件的登录链接，是链接到登录页面。我在navbar组件中有handleLogin函数，我希望通过链接传递它，并在登录组件中调用它。
如何通过这一方法？我试过使用查询和getServerSideProps，但这不起作用。
下面是navbar组件：
const Navbar = ({token}:{token:string|null}) => {
var [loggedIn,setLoggedIn]=false;
const handleLogin=()=>{
localStorage.removeItem("token")
setLogge
浏览 1提问于2022-06-28得票数 0
回答已采纳
1回答
为什么在成功登录后不显示用户名，而不是显示菜单栏中的login图标？
authentication、react-hooks、navbar、logout
因此，我有一个问题，在设置前端时，当用户登录时，菜单栏中的Login按钮将更改为显示当前登录的用户名，下拉列表显示用户配置文件和注销按钮。但是每次我与用户登录时，菜单栏中的登录不会改变，即使在控制台中显示用户已经登录，我仍然可以返回登录屏幕并再次登录。
以下是代码：
Navbar
function Navbar() {
const [showLinks, setShowLinks] = useState(false);
const { state, dispatch: ctxDispatch } = useContext(Store);
const { cart, userInfo
浏览 1提问于2022-04-04得票数 0
回答已采纳
1回答
如何在react js中将表单提交到sql数据库后显示用户信息？
javascript、mysql、node.js、reactjs、express
大家好，我在一个项目上工作，我能够注册和登录后，这两个步骤，用户必须填写一个更多的表格，即显示在下面，然后提交这些表格后，数据将进入数据库，但当我点击显示在下一页上，它显示了所有的记录。我想要填写当前用户的记录，但它显示了sql数据库中的所有记录。Main.js import { useState } from 'react'
import axios from 'axios';
import {useHistory} from 'react-router-dom';
import { useEffect } from 'react&#
浏览 18提问于2021-09-02得票数 0
1回答
使用useMemo和useEffect进行身份验证的问题
reactjs
我有我的身份验证脚本。我想使用AuthContext准备一个身份验证。
我要检查用户是否为每个页面登录，并在用户登录时添加令牌，并在注销时删除--这是很好的实践吗？
import { createContext, useContext, useEffect, useMemo, useState } from "react";
import { useNavigate } from "react-router-dom";
import axios from "axios";
import Cookies from "universal
浏览 6提问于2022-11-15得票数 0
1回答
向本地服务器发送axios请求中的401错误
node.js、reactjs、axios
上下文
我正在构建一个简单的web应用程序，使用MERN栈进行实践。在应用程序中，登录用户应该能够向站点添加一个新的博客。但是，由于某种原因，我对后端的axios请求失败了，我收到了一个401错误。我正在使用jsonwebtoken来处理身份验证。通过失眠提交帖子请求很好，所以我不认为这是我的端点的问题。我在端口3003的机器上本地运行后端服务器，并设置了一个代理，所以cors没有问题。这很好，因为一旦用户登录，后端的博客就会显示在前端。
我还检查了头，并可以确认登录用户有一个有效的承载令牌。
是什么引起了这个问题？
前端我不能发布任何图片，但是这里有一个指向前端视图的链接：
App.js
i
浏览 3提问于2022-04-15得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频活动推荐
腾讯云开发者
