JavaScript系列—用户注册登录退出cookies—node版

关于用户注册，登录，以及使用cookie相关的内容其实还是比较重要的，在《nodejs个人博客》这个项目中已经完整的讲过了，今天再拿出来巩固一下

1.注册

ui

<div id="registerBox" class="userForm" style="display: none">
    <div>新用户注册</div>
    <ul>
        <li><span>用户名:</span><input class="form-control" type="text" name="username" /></li>
        <li><span>密码:</span><input class="form-control" type="password" name="password" /></li>
        <li><span>确认密码:</span><input class="form-control" type="password" name="repassword" /></li>
        <li><button type="button" class="btn btn-primary">注册</button></li>
        <li>已经注册？<a href="javascript:void(0)">现在登录</a></li>
        <li id="messageShow"></li>
    </ul>
</div>

提交数据

    $('#registerBox').find('button').on('click', function() {
        $.ajax({
            type: 'post',
            url: 'api/user/register',
            data: {
                username: $('#registerBox').find("[name='username']").val(),
                password: $('#registerBox').find("[name='password']").val(),
                repassword: $('#registerBox').find("[name='repassword']").val()
            },
            dataType: 'json',
            success: function(result) {
                $('#messageShow').html(result.message);
                if (!result.code) {
                    setTimeout(function() {
                        $('#loginBox').show();
                        $('#registerBox').hide();
                    }, 1000)
                }
            }
        })
    })

node后端需要写的逻辑

/**
 * 用户注册
 *  注册逻辑
 *  1.用户不能为空
 *  2.密码不能为空
 *  3.两次输入密码必须一致
 * 
 *  1.用户是否已经被注册了（数据库查询）
 */
router.post('/user/register', function (req, res, next) {
    var username = req.body.username;
    var password = req.body.password;
    var repassword = req.body.repassword;

    // 用于是否为空
    if (username === '') {
        responseData.code = 1;
        responseData.message = '用户名不能为空';
        res.json(responseData);
        return;
    }

    // 用于是否为空
    if (password === '') {
        responseData.code = 2;
        responseData.message = '密码不能为空';
        res.json(responseData);
        return;
    }

    // 两次输入密码必须一致
    if (password === '') {
        responseData.code = 3;
        responseData.message = '两次输入密码不一致';
        res.json(responseData);
        return;
    }

    /**
     * 用户名是否已经被注册了，此处要操作数据
     */
    User.findOne({
        username: username
    }).then(function (userInfo) {
        if (userInfo) {
            // 表示數據庫中有該記錄
            responseData.code = 4;
            responseData.message = '用户名已经被注册了';
            res.json(responseData);
            return;
        }
        // 保存用户注册的信息到数据库中
        var user = new User({
            username: username,
            password: password
        });
        return user.save();
    }).then(function (newUserInfo) {
        // console.log(newUserInfo);
        responseData.message = '注册成功';
        res.json();
    });
});

2.登录

前端界面

<div id="loginBox" class="userForm">
    <div>用户登录</div>
    <ul>
        <li><span>用户名:</span><input class="form-control" type="text" name="username" /></li>
        <li><span>密码:</span><input class="form-control" type="password" name="password" /></li>
        <li><button type="button" class="btn btn-primary">登录</button></li>
        <li>还没账号？<a href="javascript:void(0)">立即注册</a></li>
        <li id="loginInfo"></li>
    </ul>
</div>

提交数据

    $('#loginBox').find('button').on('click', function() {
        $.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) {
                $('#loginInfo').html(result.message);
                if (!result.code) {
                    setTimeout(function() {
                        //后端控制cookies 显示
                        /* $('#loginBox').hide();
                        $('#registerBox').hide();
                        $('#userInfo').show();
                        $('#userInfo').find('.username').html(result.userInfo.username);
                        $('#userInfo').find('.info').html('欢迎登录') */

                        //动态数据控制  直接刷新页面
                        window.location.reload()
                    }, 1000)
                }
            }
        })
    })

后端node逻辑

/**
 * 登陆
 */
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
        }
        req.cookies.set('userInfo', JSON.stringify({
            _id: userInfo._id,
            username: userInfo.username
        }));
        res.json(responseData);
        return;
    })
});

3.使用cookie保存用户登录状态
 

首先在登录的逻辑里面这样写

然后在app.js里面这样写吧

// 加载cookies模块
var cookies = require('cookies');

// 设置cookies
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'));
            // 获取当前登录用户的类型，是否是管理员
            User.findById(req.userInfo._id).then(function(userInfo) {
                req.userInfo.isAdmin = Boolean(userInfo.isAdmin);
                next();
            })
        } catch (e) {
            next();
        }
    } else {
        next();
    }
});

退出的时候这样写（其实就是删掉cookies）

ui中的js

node后端逻辑

以上就是使用原生的html和node后端来实现用户注册，登录，设置cookies，退出的全过程。下一节我们看看如何配合vue，以及和后端不在一个项目中怎么做。