后台:需要在得到登录响应后在数据库里查询是否存在用户名和密码,存在则登录成功,发送cookie和msg,否则登录不成功。
router.post('/api/login/checkAccount', function(req, res){
let userInfo = {
account:req.body.account,
password:getMD5Password(req.body.password)
}
console.log(userInfo)
models.Login.find(userInfo,function(err,detail){
console.log("checkAccount",detail)
if(detail.length){
res.cookie('login', 'username='+req.body.account, {
path: '/',
expires: new Date(Date.now() + 10000 * 60 * 60 * 24 * 7)
});
res.end(JSON.stringify({code:1,msg:'login successed'}));
console.log('login successed')
}else{
res.end(JSON.stringify({code:1,msg:'login failed'}));
}
})
});
前端,在页面渲染时需要getcookie,如果cookie存在则显示welcome,{{username}},否则界面出现login表格,请求登录。登录后如果code正确做相应的渲染。
<template>
<div>
<div class="reg">
<input class="form-control" id="inputEmail3" placeholder="请输入账号" v-model="account">
<input type="password" class="form-control" id="inputPassword3" placeholder="请输入密码" v-model="password">
<button type="submit" class="btn btn-default" @click="login">注册</button>
</div>
<div class="login" v-if="username==undefined">
<input class="form-control" id="inputEmail3" placeholder="请输入账号" v-model="account_login">
<input type="password" class="form-control" id="inputPassword3" placeholder="请输入密码" v-model="password_login">
<button type="submit" class="btn btn-default" @click="reg">登录</button>
</div>
<div v-if="username!==undefined && username!==''">
<span>welcome {{username}}</span>
<button type="submit" class="btn btn-default" @click="logout">登出</button>
</div>
</div>
</template>
<script>
export default {
data() {
return {
account : '',
password : '',
account_login:'',
password_login:'',
username:''
}
},
mounted() {
if(this.getCookie("login")){
this.username = this.testKey(this.getCookie("login"),"username")
}else{
this.username = undefined
}
},
methods:{
login() {
this.$axios.post('/api/login/createAccount',{account:this.account,password:this.password}).then(res => {
console.log(res.data.code)
}).catch(err => {
})
},
reg() {
this.$axios.post('/api/login/checkAccount',{account:this.account_login,password:this.password_login}).then(res => {
console.log(res.data.code)
if(this.getCookie("login")){
this.username = this.testKey(this.getCookie("login"),"username")
}else{
this.username = undefined
}
}).catch(err => {
})
},
logout() {
this.username = undefined
this.delCookie("login")
},
delCookie:function (name){
var exp = new Date();
exp.setTime(exp.getTime() - 1);
var cval=this.getCookie(name);
if(cval!=null)
document.cookie= name + "="+cval+";expires="+exp.toGMTString();
},
getCookie:function(name){
var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)");
if(arr=document.cookie.match(reg))
return unescape(arr[2]);
else
return null;
},
testKey:function(str,key) {
let arr = str.split("&")
for(let i = 0; i < arr.length; i++) {
if(arr[i].split("=")[0] == key){
return arr[i].split("=")[1]
}
}
return ''
}
}
}
</script>
网友评论