egg(102)--egg之用戶登陸 以及登陸時候涉及的一些安全問題

router

router.get('/login', initMiddleware, controller.default.pass.login);
    router.post('/pass/doLogin', initMiddleware, controller.default.pass.doLogin);
    router.get('/pass/loginOut', initMiddleware, controller.default.pass.loginOut);

登陸

controller

app/controller/default/pass.js

async login() {
        await this.ctx.render('default/pass/login.html');
    }
    async doLogin() {
        var username = this.ctx.request.body.username;
        var password = this.ctx.request.body.password;
        var identify_code = this.ctx.request.body.identify_code;

        if (identify_code != this.ctx.session.identify_code) {

            //從新生成驗證碼 爲了安全
            var captcha = await this.service.tools.captcha(120, 50);
            this.ctx.session.identify_code = captcha.text;

            this.ctx.body = {
                success: false,
                msg: '輸入的圖形驗證碼不正確'
            }


        } else {

            password = await this.service.tools.md5(password);

            var userResult = await this.ctx.model.User.find({ "phone": username, password: password }, '_id phone last_ip add_time email status');

            if (userResult.length) {

                //cookies 安全      加密
                this.service.cookies.set('userinfo', userResult[0]);
                this.ctx.body = {
                    success: true,
                    msg: '登陸成功'
                }
            } else {

                //從新生成驗證碼
                var captcha = await this.service.tools.captcha(120, 50);
                this.ctx.session.identify_code = captcha.text;

                this.ctx.body = {
                    success: false,
                    msg: '用戶名或者密碼錯誤'
                }
            }


        }


    }

配置請求不通過csrf驗證

config/config.default.js

config.security = {
        csrf: {
            // 判斷是否須要 ignore 的方法，請求上下文 context 做爲第一個參數
            ignore: ctx => {
                if (ctx.request.url == '/pass/doLogin') {
                    return true;
                }
                return false;
            }
        }
    }

view

app/view/default/pass/login.html

<div class="form">
        <div class="login">

            <div class="login_center">
                <div class="login_top">
                    <div class="left fl">會員登陸</div>
                    <div class="right fr">您還不是咱們的會員？<a href="/register/registerStep1" target="_self">當即註冊</a></div>
                    <div class="clear"></div>
                    <div class="xian center"></div>
                </div>
                <div class="login_main center">
                    <div class="username">用戶名：<input class="shurukuang" id="username" type="text" name="username" placeholder="請輸入你的手機號" /></div>
                    <div class="username">密　碼：<input class="shurukuang" id="password" type="password" name="password" placeholder="請輸入你的密碼" /></div>
                    <div class="username">
                        <div class="left fl">驗證碼：<input class="yanzhengma" id="identify_code" type="text" name="identify_code" placeholder="請輸入驗證碼" /></div>
                        <div class="right fl">
                            <img id="identify_code_img" src="/verify" title="看不清？點擊刷新" onclick="javascript:this.src='/verify?mt='+Math.random()">
                        </div>
                        <div class="clear"></div>
                    </div>
                </div>
                <div class="login_submit">

                    <button class="submit" id="doLogin">當即登陸</button>
                </div>
            </div>

        </div>
    </div>

$(function() {
            $("#doLogin").click(function(e) {

                var username = $('#username').val();
                var password = $('#password').val();
                var identify_code = $('#identify_code').val();
                var reg = /^[\d]{11}$/;
                if (!reg.test(username)) {
                    alert('手機號輸入錯誤');
                    return false;
                }
                if (identify_code.length < 4) {
                    alert('驗證碼長度不合法');
                    return false;
                }

                //ajax請求

                $.post('/pass/doLogin', {
                    username: username,
                    identify_code: identify_code,
                    password: password
                }, function(response) {
                    console.log(response);
                    if (response.success == true) {
                        location.href = "/";
                    } else {

                        $("#identify_code_img").attr('src', '/verify?mt=' + Math.random());

                        alert(response.msg);
                    }
                })

            })

        })

效果

當輸入的驗證碼不正確的時候，返回新的驗證碼javascript

退出

controller

app/controller/default/pass.js

async loginOut() {
        this.service.cookies.set('userinfo', '');
        this.ctx.redirect('/');
    }

view

app/view/default/public/header.html

<li><a href="/pass/loginOut">退出登陸</a></li>

效果