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

心已赠人 2021-12-18 05:35 272阅读 0赞

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

### 1.注册 ###

<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.登录 ###

前端界面

提交数据

$('#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保存用户登录状态

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70][]

然后在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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 1][]

node后端逻辑

![20190702195822849.png][]

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70]: /images/20211218/a5295c7e1a04416fbbd374ca2182516d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 1]: /images/20211218/8bb3a58b336947c2878094583c71ef49.png
[20190702195822849.png]: /images/20211218/c98c2bb3a7354671a10b91032bfed929.png