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

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

作者: 游荡的猫咪 | 来源:发表于2018-06-07 13:31 被阅读0次

    后台:需要在得到登录响应后在数据库里查询是否存在用户名和密码,存在则登录成功,发送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>
    

    相关文章

      网友评论

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

          本文链接:https://www.haomeiwen.com/subject/qehgsftx.html