您现在的位置是: 首页 » 网页代码 » node如何实现保持登录状态
网页代码

node如何实现保持登录状态

网站优化小编一月 7, 2020 16人已围观

当我们登录成功,在这个页面刷新,页面并没有保存登录状态;今天我们就来看一下如何在后台使用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 class="mainRight">
 
 
        <div class="rightBox" id="userInfo" style="display:none;">
           <div class="title"><span>用户信息</span></div>
           <p><span class="colDark username">admin</span></p>
 
           <p><span class="colDanger info">你好,你是管理员,<a href="/admin">你可以点击这里进入管理</a>
           </span></p>
 
           <p><span class="colDark logout"><a href="javascript:;">退出</a></span></p>
        </div>
 
        <div class="rightBox" id="loginBox" style="display:none;">
           <div class="title"><span>登录</span></div>
           <div class="line"><span class="colDark">用户名:</span><input name="username" type="text" />
           <em></em></div>
           <div class="line"><span class="colDark">密码:</span><input name="password" type="password"/>
           <em></em></div>
           <div class="line"><span class="colDark"></span><button>登 录</button></div>
           <p class="textRight">还没注册?<a href="javascript:;" class="colMint">马上注册</a> </p>
           <p class="colWarning textCenter"></p>
        </div>
 
        <div class="rightBox" id="registerBox" >
           <div class="title"><span>注册</span></div>
           <div class="line"><span class="colDark">用户名:</span><input name="username" type="text" />
           </div>
           <div class="line"><span class="colDark">密码:</span><input name="password" type="password"/>
           </div>
           <div class="line"><span class="colDark">确认:</span>
           <input name="repassword" type="password"/></div>
           <div class="line"><span class="colDark"></span><button>注 册</button></div>
           <p class="textRight">已有账号?<a href="javascript:;" class="colMint">马上登录</a> </p>
           <p class="colWarning textCenter"></p>
        </div>
 
 
        <div class="rightBox">
            <div class="title"><span>社区</span></div>
            <p><a href="http://www.miaov.com" target="_blank" class="colDanger">妙味课堂</a></p>
            <p><a href="http://bbs.miaov.com" target="_blank" class="colDanger">妙味茶馆</a></p>
        </div>
    </div>

3、在index.js中

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

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

在index.html中修改成如下

<div class="rightBox" id="userInfo" style="display:none;">
            <div class="title"><span>用户信息</span></div>
            <p><span class="colDark username"></span></p>
 
            <p><span class="colDanger info"></span></p>
 
            <p><span class="colDark logout"><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 class="rightBox" id="userInfo">
            <div class="title"><span>用户信息</span></div>
            <p><span class="colDark username">{{userInfo.username}}</span></p>
 
            <p><span class="colDanger info">你好,欢迎光临我的博客!</span></p>
 
            <p><span class="colDark logout"><a href="javascript:;">退出</a></span></p>
        </div>
        {% else %}
        <div class="rightBox" id="loginBox" style="display:none;">
           <div class="title"><span>登录</span></div>
           <div class="line"><span class="colDark">用户名:</span>
           <input name="username" type="text" /><em></em></div>
           <div class="line"><span class="colDark">密码:</span>
           <input name="password" type="password" /><em></em>
           </div>
           <div class="line"><span class="colDark"></span><button>登 录</button></div>
           <p class="textRight">还没注册?<a href="javascript:;" class="colMint">马上注册</a> </p>
           <p class="colWarning textCenter"></p>
        </div>
 
        <div class="rightBox" id="registerBox" >
            <div class="title"><span>注册</span></div>
            <div class="line"><span class="colDark">用户名:</span>
            <input name="username" type="text" /></div>
            <div class="line"><span class="colDark">密码:</span>
            <input name="password" type="password" /></div>
            <div class="line"><span class="colDark">确认:</span>
            <input name="repassword" type="password" /></div>
            <div class="line"><span class="colDark"></span><button>注 册</button></div>
            <p class="textRight">已有账号?<a href="javascript:;" class="colMint">马上登录</a> </p>
            <p class="colWarning textCenter"></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 class="colDark"><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);
})

文章评论

    发表评论

    电子邮件地址不会被公开。

站点信息
  • 站点运行:265天
  • 网站程序:Wordpress
  • 主题模板:bvseo
  • 文章统计:3950 条
  • 文章评论:117 条
  • 微信公众号:扫描二维码,关注我们