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);
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: '用户名或者密码错误' } } } }
config/config.default.js
config.security = { csrf: { // 判断是否须要 ignore 的方法,请求上下文 context 做为第一个参数 ignore: ctx => { if (ctx.request.url == '/pass/doLogin') { return true; } return false; } } }
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
app/controller/default/pass.js
async loginOut() { this.service.cookies.set('userinfo', ''); this.ctx.redirect('/'); }
app/view/default/public/header.html
<li><a href="/pass/loginOut">退出登陆</a></li>