node.js后台登录逻辑(发送cookie前端接收处理)

后台:需要在得到登录响应后在数据库里查询是否存在用户名和密码,存在则登录成功,发送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>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容