node.js - 使用 socket.io 和 vue 的 Express Session 在每次页面加载时都会重置

标签 node.js vue.js express socket.io express-session

我试图创建一个简单的登录应用程序,只是为了玩弄socketio,vue和nodejs(express),我让发送和接收在客户端和服务器上工作。 但是当我尝试集成 session 以便让用户保持登录状态时遇到问题。

我尝试了很多不同的模块,但没有任何效果。我确信有些东西我现在还没有得到,因为我对 Nodejs 等还很陌生。

无论如何,这是我的代码:

前端:

<template>
    <div>
        <p>
            <input type="text" name="username" id="username" v-model="user.username" placeholder="Username" /><br />
            <input type="password" name="password" id="password" v-model="user.password" placeholder="Password" /><br />
            <button v-on:click="register()">Register</button>
        </p>
    </div>
</template>

<script>
import io from 'socket.io-client';

export default {
    name: 'BlockGame',
    data() {
        return {
            user: {
                username: '',
                password: '',
            },
            socket: {},
            context: {},
        };
    },
    created() {
        this.socket = io('localhost:3000', {
            withCredentials: true,
        });
    },
    mounted() {
        this.socket.on('', (data) => {});
    },
    methods: {
        register() {
            this.socket.emit('register-user', this.user);
        },
    },
};
</script>

<style scoped></style>

后端:

const app = require('express')();
const redis = require('redis');
const server = require('http').createServer(app);
const session = require('express-session');
const socketio = require('socket.io')(server, {
    cors: {
        origin: 'http://localhost:8080',
        methods: ['GET', 'POST'],
        preflightContinue: false,
        optionsSuccessStatus: 204,
        credentials: true,
    },
});
let RedisStore = require('connect-redis')(session);
let redisClient = redis.createClient();

var sessionMiddleware = session({
    name: 'session_cookie',
    secret: 'edfafewfdsfezhrjew',
    store: new RedisStore({ client: redisClient }),
    resave: false,
    saveUninitialized: true,
    cookie: { maxAge: 1000 * 60 * 5, secure: false },
});

app.use(sessionMiddleware);

socketio.use((socket, next) => {
    sessionMiddleware(socket.request, {}, next);
});

socketio.on('connect', (socket) => {
    const session = socket.request.session;
    console.log(session.id);
    if (session.user) {
        console.log('----- SESSION -----');
        console.log('Session ID: ' + session.id + ' / Session User: ' + session.user);
    }

    socket.on('register-user', (data) => {
        const session = socket.request.session;
        session.user = data['username'];

        session.save();
        console.log(session);
    });
});

server.listen(3000, () => {
    console.log('Listening at :3000...');
});

基本上应该发生的是,当用户“登录”时,他的用户名会保存到 session 中。当用户刷新页面时,它应该仍然存在。但目前,每次用户刷新页面时,他都会获得一个新 session ,因此一切都消失了。

希望有人能帮助我。

最佳答案

我尝试了您的服务器代码,并通过express.static提供客户端服务,它按预期工作。即使刷新后或在新选项卡上也提供相同的 sessionId。

app.use(express.static("public"))

客户端代码,保存在public/index.html

<!doctype html>
<html>
    <head>
        <script src='/socket.io/socket.io.js'></script>
        <script>
            var socket = io("/",{withCredentials: true,});
            socket.on('connect', ()=>{
                socket.emit('register-user', {username:"User Name"});
                document.write("Connected")

            })
           
        </script>
    </head>
</html>

在您的情况下,您正在从不同的来源提供客户文件。 Express session 不会按您的预期工作。即使对于简单的获取请求也会创建新 session 。尝试将以下代码添加到您的服务器,并尝试从您的客户端发出 get 请求,您就会明白我的意思

app.use((req,_,next)=>{
    console.log(req.session.id)
    next()
})

关于node.js - 使用 socket.io 和 vue 的 Express Session 在每次页面加载时都会重置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/67902031/

相关文章:

javascript - Vue.js - 如何正确有条件地设置点击处理程序代码

javascript - 使用身份验证中间件表达资源?

reactjs - app.delete 中的 req.params 为空,在 react 中使用 express、axios

node.js - 如何重命名文件而不覆盖现有文件?

javascript - MongoDB 聚合两个不同的组

javascript - 如何从 Firebase 函数将触发器放置到另一个 Firebase 数据库?

javascript - WordPress + Vue.js : Contact Forms

node.js - 水线: Trying to access a collection string that is not defined

javascript - 检查角色时无限循环。 VueJS

node.js - Sequelize ,将对象与子(关联)对象一起存储