node如何实现保持登录状态？

当我们登录成功，在这个页面刷新，页面并没有保存登录状态；今天我们就来看一下如何在后台使用cookie保存用户登录状态。做到刷新页面仍然显示在用户登录界面。

node实现保持登录状态的方法如下：

登录设置：

1、首先在index.js中加入用户登录的ajax数据传输

//登录
    $loginBox.find('button').on('click',function () {
        //通过ajax提交请求
        $.ajax({
            type:'post',
            url:'/api/user/login',
            data:{
                username:$loginBox.find('[name="username"]').val(),
                password:$loginBox.find('[name="password"]').val(),
            },
            datatype:'json',
            success:function (result) {
                 if(!result.code){
                    //登录成功
                    setTimeout(function(){
                        $loginBox.hide();
                        $userInfo.show();
                    },1000);
                }
            }
        })
    })

2、在api.js中加入登录路由

//登录
router.post('/user/login',function (req,res) {//新增路由
    var username=req.body.username;
    var password=req.body.password;
 
    if(username == ''|| password==''){
        responseData.code=1;
        responseData.message='用户名和密码不能为空';
        res.json(responseData);
        return;
    }
    //查询数据库中相同用户名和密码的记录是否存在，如果存在则登录成功
    User.findOne({
        username:username,
        password:password
    }).then(function (userInfo) {
        if(!userInfo){
            responseData.code=2;
            responseData.message='用户名或密码错误';
            res.json(responseData);
            return;
        }
        //用户名和密码是正确的
        responseData.message='登录成功';
        responseData.userInfo={
            _id:userInfo._id,
            username:userInfo.username
        }
        res.json(responseData);
        return;
    });
});

补充：index.html页面中登录，注册，已登录的页面情况

<div>
 
 
        <div id="userInfo">
           <div><span>用户信息</span></div>
           <p><span>admin</span></p>
 
           <p><span>你好，你是管理员，<a href="/admin">你可以点击这里进入管理</a>
           </span></p>
 
           <p><span><a href="javascript:;">退出</a></span></p>
        </div>
 
        <div id="loginBox">
           <div><span>登录</span></div>
           <div><span>用户名：</span><input name="username" type="text" />
           <em></em></div>
           <div><span>密码：</span><input name="password" type="password"/>
           <em></em></div>
           <div><span></span><button>登 录</button></div>
           <p>还没注册？<a href="javascript:;">马上注册</a>　</p>
           <p></p>
        </div>
 
        <div id="registerBox" >
           <div><span>注册</span></div>
           <div><span>用户名：</span><input name="username" type="text" />
           </div>
           <div><span>密码：</span><input name="password" type="password"/>
           </div>
           <div><span>确认：</span>
           <input name="repassword" type="password"/></div>
           <div><span></span><button>注 册</button></div>
           <p>已有账号？<a href="javascript:;">马上登录</a>　</p>
           <p></p>
        </div>
 
 
        <div>
            <div><span>社区</span></div>
            <p><a href="http://www.miaov.com" target="_blank">妙味课堂</a></p>
            <p><a href="http://bbs.miaov.com" target="_blank">妙味茶馆</a></p>
        </div>
    </div>

3、在index.js中

var $userInfo = $('#userInfo');//获得登录以后页面

4、用户成功登录以后，要显示html中userInfo页面

在index.html中修改成如下

<div id="userInfo">
            <div><span>用户信息</span></div>
            <p><span></span></p>
 
            <p><span></span></p>
 
            <p><span><a href="javascript:;">退出</a></span></p>
        </div>

在index.js中修改

//登录
    $loginBox.find('button').on('click',function () {
        //通过ajax提交请求
        $.ajax({
            type:'post',
            url:'/api/user/login',
            data:{
                username:$loginBox.find('[name="username"]').val(),
                password:$loginBox.find('[name="password"]').val(),
            },
            datatype:'json',
            success:function (result) {
                //提示信息
                $loginBox.find('.colWarning').html(result.message);
                if(!result.code){
                    //登录成功
                    setTimeout(function(){
                        $loginBox.hide();
                        $userInfo.show();
                        //显示登录用户的信息
                        $userInfo.find('.username').html(result.userInfo.username);
                        $userInfo.find('.info').html('你好，欢迎光临我的博客');
                    },1000);
                }
            }
        })
    })

5、用户登录成功以后，但是当我们刷新页面的时候，就退出登录状态了，我们需要运用cookie记录用户登录状态

使用cookie记录用户登录状态的方法：

(1) 在app.js中引入cookie模块

//加载cookie模块
var cookies = require('cookies');
//对cookie进行相关设置
app.use(function (req,res,next) {
    req.cookies = new Cookies(req,res);
    next(); //不要忘记
});

（2）在api.js的登录路由中，不仅要返回页面信息，也需要发送一个cookie

//用户名和密码是正确的
        responseData.message='登录成功';
        responseData.userInfo={
            _id:userInfo._id,
            username:userInfo.username
        }
        req.cookies.set('userInfo',JSON.stringify({
            _id:userInfo._id,
            username:userInfo.username
        }));
        res.json(responseData);
        return;

（3）发现完成以后，信息头里面已经有了cookie信息，但是页面刷新的时候，仍然不能保持登录

在app.js中，将cookie的进行如下修改

//对cookie进行相关设置
app.use(function (req,res,next) {
    req.cookies = new Cookies(req,res);
    //设置一个全局访问的页面,解析用户登录的cookie信息
    req.userInfo={};
    if(req.cookies.get('userInfo')){
        try{
            req.userInfo=JSON.parse(req.cookies.get('userInfo'));
        }catch (e){}
    }
    next();
});

在模板main.js中，分配模板

var express = require('express');
var router =express.Router();
router.get('/',function(req,res,next) {
    res.render('main/index',{ //第二个参数分配模板
        userInfo:req.userInfo
    });//渲染当前views下面的index.html页面
 
});

在index.html中进行判断分析

{% if userInfo._id %} <!--模板语言-->
       <div id="userInfo">
            <div><span>用户信息</span></div>
            <p><span>{{userInfo.username}}</span></p>
 
            <p><span>你好，欢迎光临我的博客！</span></p>
 
            <p><span><a href="javascript:;">退出</a></span></p>
        </div>
        {% else %}
        <div id="loginBox">
           <div><span>登录</span></div>
           <div><span>用户名：</span>
           <input name="username" type="text" /><em></em></div>
           <div><span>密码：</span>
           <input name="password" type="password" /><em></em>
           </div>
           <div><span></span><button>登 录</button></div>
           <p>还没注册？<a href="javascript:;">马上注册</a>　</p>
           <p></p>
        </div>
 
        <div id="registerBox" >
            <div><span>注册</span></div>
            <div><span>用户名：</span>
            <input name="username" type="text" /></div>
            <div><span>密码：</span>
            <input name="password" type="password" /></div>
            <div><span>确认：</span>
            <input name="repassword" type="password" /></div>
            <div><span></span><button>注 册</button></div>
            <p>已有账号？<a href="javascript:;">马上登录</a>　</p>
            <p></p>
        </div>
        {% endif %}

（4）在登录成功，以后就不需要在index.js中将页面隐藏，只需要刷新页面即可

//登录
    $loginBox.find('button').on('click',function () {
        //通过ajax提交请求
        $.ajax({
            type:'post',
            url:'/api/user/login',
            data:{
                username:$loginBox.find('[name="username"]').val(),
                password:$loginBox.find('[name="password"]').val(),
            },
            datatype:'json',
            success:function (result) {
                //提示信息
                $loginBox.find('.colWarning').html(result.message);
                if(!result.code){
                    //登录成功
                    // setTimeout(function(){
                    //     $loginBox.hide();
                    //     $userInfo.show();
                    //     //显示登录用户的信息
                    //     $userInfo.find('.username').html(result.userInfo.username);
                    //     $userInfo.find('.info').html('你好，欢迎光临我的博客');
                    // },1000);
                    window.location.reload();
                }
            }
        })
    })

6、用户退出，

（1）index.html中

<p><span><a href="javascript:;" id="logout">退出</a></span></p>

（2）在index.js中，增加退出路由

//退出
    $('#logout').on('click',function () {
        $.ajax({
            url:'/api/user/logout',
            success:function (result) {
                if(!result.code){
                    window.location.reload();
                }
            }
        })
    })

（3）在api.js中

//退出
router.get('/user/logout',function (reqres) {
req.cookies.set('userInfo',null);
res.json(responseData);
})

链接: https://www.fly63.com/article/detial/7711

node如何实现保持登录状态？

Javascript 状态管理工具 DataSet ，实现数据的订阅、查询、撤销和恢复

理解 React 轻量状态管理库 Unstated

你再也不用使用 Redux、Mobx、Flux 等状态管理了

为什么要使用状态管理

React使用Hooks与Context替代Redux状态管理

如何使用react hooks来进行状态管理？

Flutter基础--状态管理

共享可变状态中出现的问题以及如何避免？

使用Observable实现Vue全局状态共享

3条简单的React状态管规则