cookie登录_用cookie实现websocket自动登录,session状态保留。

会话状态的保留,即登录状态保持,是很常见、很常用的功能。
本文将介绍,在NodeJS开发中,如何实现websocket连接的会话(Session)状态保持。注意,是websocket通信,一般常见的介绍是Http登录状态,websocket实现方案很少。

0d31b98e8c6d6d8d2807f2b38bb0299e.png


要实现的效果是:
输入帐号密码登录,登录后刷新、关闭页面均不影响登录状态、还会自动进入登录后的页面。
实现方法详细:原理:
在服务端,当登录操作时,保存客户cookie,
如果再次有连接,检查连接请求的cookie是否与登录客户保留的cookie一致,如果一致则认为已经登录,无需再次校验。上代码、上实例
在本例中,上述功能主要需两个文,一个服务器、一个客户端。

4bc09a28d1468448d0d1b65904bde9e0.png


1、客户端index.html页面代码如下:

beead04c17fad8b9ab344d8387756ad4.png
<html>
    <head>
    <meta charset="UTF-8">
    </head>
    <body>
    <div id="login" style="display: block;">
        <form >
            user: <input type="text" id="user" value="admin"/>
            <br>
            pass: <input type="password" id="pass" value="adminpass"/>
            <br>
            <input type="button" value="Submit" onclick="login();"/>
        </form>
    </div>
    <div id="logined" style="display: none;">
    </div>
    <script>
        function login(){
            var user = document.getElementById("user").value;
            var pass = document.getElementById("pass").value;
            
            socket_io.emit("login",{"user":user, "pass":pass});
            
        }
    </script>
    <script src="socket.io.js"></script>
    <script>
        var socket_io = io("http://127.0.0.1:8080");
        socket_io.on("login_ret",function(data){
            if(data.status == 0){
                document.getElementById("login").style.display = "none";
                document.getElementById("logined").style.display = "block";
                document.getElementById("logined").innerText = "You have logined:" + data.user;
            }
        });
    </script>
    </body>
</html>


即一个输入帐号密码进行登录的页面。

14c4ffe8e395fcd19b24469af511e50b.png


2、服务端server.js代码如下:

7d4f43544199a0fabfe5cfb460d4922c.png
var 

代码很简洁,如上,且有详细注释。功能原理在上文中也已说明,在此不再赘述。
运行效果:
先启动服务端:

8c8dbbf48ea4fde766d9dc7b204a691b.png


首次登录时,后面提示:

41aa613c5cdda097fab8b7197f392366.png


刷新或重打开页面,不需要重新输入帐号密码,会自动进入登录状态:

5f17819e5f99373325b7e2f9b7daba07.png

原创文章,不限转载。欢迎分享学习,大家一起进步。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值