Node写博客--用户登录和用cookie保存用户登录状态

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记录用户登录状态

(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页面

});

module.exports = router;

在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);
})