node.js - 如何在 reactJs NodeJs web APP 中维护 Session？

Question

我正在开发一个注册/登录网站，其中包括所有功能，以使其使用 reactJS、NodeJS 和 Mysql 以高效和安全的方式工作。在我使用快速会话之前，一切都运行良好。实际上，当用户登录时，他将被重定向到主页（显然会创建一个会话）但是当用户刷新页面时，预计会留在主页上但我得到的行为是丢失会话，从而被重定向到登录页面。我寻找了一个修复程序，我已经尝试在前端使用 Axios 并在后端使用 Cors 启用凭据，但问题仍然存在。这是我的代码：server.js

const express = require('express');
const app = express();
const mysql = require('mysql2');
const cors = require('cors');
const validator = require('validator');
const {body, validationResult} = require('express-validator');
const session = require('express-session');
const cookieParser = require('cookie-parser');

app.use(express.json());
app.use(cors({
    origin: ['http://localhost:3000'],
    methods: ['GET', 'POST'],
    credentials: true,
}
));

app.use(express.urlencoded({extended: true}));
app.use(cookieParser());
app.use(session({
    name: 'session',
    secret: 'crud',
    resave: false,
    saveUninitialized: false,
    cookie: {
        expires: 60 * 30,
        sameSite: 'strict',
    }
}
app.post('/login', (req, res) => {
    const mail = validator.escape(req.body.mail);
    const pass = validator.escape(req.body.pass);
    const sqlSelect = 'SELECT * FROM login WHERE mail = ? AND pass =  ?';
    db.query(sqlSelect, [mail, pass], (err, result) => {
        if (err) {
            console.log(err);
        }

        if (result.length > 0) {
            req.session.user = result;
            req.session.loggedIn = true;
            console.log(req.session.user);

            res.send({message: 'success', session: req.session});
            
        }
        else {
            res.send({message: 'Wrong combination Email/Password !'});
        }
    })
    
});
app.get('/login', (req, res) => {
    console.log(req.session.user);
    if (req.session.user){
        res.send({
            session: req.session,
            message: 'logged'
        });
    }
    else {
        res.send({
            message: 'Not logged'
        });
    }
});

app.js（登录页面）

 Axios.defaults.withCredentials = true;
    
    const onSubmit = () => {
        Axios.post('http://localhost:9001/login', {
            mail,
            pass,
        }).then((response) => {
            console.log(response.data.message);
            if (response.data.message === 'success') {
                history.push('/home');
            }
            else {
                setMessage(response.data.message);
            }
            
        });
    };

主页.js

export default function Home() {
    const [user, setUser] = useState('');
    const history = useHistory();
    

    
    
    useEffect(() => {
        
        Axios.get('http://localhost:9001/login', {withCredentials: true}).then((response) => {
            console.log(response.data.message);

           
            if (response.data.message === 'logged'){
                setUser(response.data.session.user[0].mail);
            }
            else {
                history.push('/');
            }
        })
    //eslint-disable-next-line
    }, []);
    return (
        <div>
            <p>{user}</p>
        </div>
        
    )
}

我希望有人能够建议对此进行一些修复。我知道我可以使用 localStorage 但我想改用会话。

标签： node.jsreactjsexpressaxios