前端记住密码功能

上周给运营系统补了个记住密码的功能，好像很容易的需求啊，还真费了不少劲，补充了不少cookie方面的知识~特地总结下！

大体思路就是通过存/取/删cookie实现的；每次进入登录页，先去读取cookie，如果浏览器的cookie中有账号信息，就自动填充到登录框中，存cookie是在登录成功之后，判断当前用户是否勾选了记住密码，如果勾选了，则把账号信息存到cookie当中，效果图如下：

浏览器中的cookie信息如下图，注意这里的cookie的expire/Max-Age过期时间，这个时间是格林尼治标准时间GMT，世界统一的时间，GMT+8小时就是北京时间，初中地理没学好，特地去查了下！！

实现代码：

html

 

<template>
    <div class="login-wrapper">
        <form class="form-signin" role="form">
            <h2 class="form-signin-heading">点播系统</h2>
            <input class="form-control" v-model="userName" v-on:keydown="doLogin($event)" placeholder="用户名" required autofocus>
            <input type="password" class="form-control" v-model="passWord" v-on:keydown="doLogin($event)" placeholder="Password">
            <div class="checkbox remember-password-container">
                <input type="checkbox" value="remember-me" v-model="rememberPassword" id="remember-password-checkbox" v-on:click="doRememberPassword($event)">
                <label for="remember-password-checkbox">
                    Remember me
                </label>
            </div>
            <div class="btn btn-lg btn-primary btn-block" v-on:click="doLogin()">Sign in</div>
        </form>
    </div>
</template>

 

登录处理逻辑js

 

export default {
    // name: 'component2',
    data () {
        return {
            userName: "",
            passWord: "",
            rememberPassword: false
        }
    },
    // 相当于init doAjax
    beforeCreate() {
        // console.log('login页面 加载完成！')
    },
    // 相当于ready 模板编译挂载之后
    mounted: function() {
        //读取cookie中的账号信息，如果有accountInfo的话，则说明该用户之前勾选了记住密码的功能，则需要自动填上账号密码
        this.loadAccountInfo();
    },
    methods: {
        doLogin: function(event){

            var mySelf = this;
            const router = this.$router;
            // console.log(router)
            // router.go();
            // router.push({path:'/index'})
            // console.log(pars.domain)

            var mySelf = this;
            var userName = mySelf.userName;
            var userPwd = mySelf.passWord;
            //记住密码checkbox的勾选状态 和账号信息的字符串
            var rememberStatus = mySelf.rememberPassword;
            var accountInfo = "";
            accountInfo = userName + "&" + userPwd;

            if (event && event.type == 'keydown' && event.keyCode != 13) {
                return;
            }

            //console.log("用户名：" + userName)
            //console.log("密码：" + userPwd)

            if (userName == ""){
                util.showDialog('error','用户名不能为空！');
                return;
            }
            if (userPwd == ""){
                util.showDialog('error','密码不能为空！');
                return;
            }

            $.get( pars.domain + "xxx" + "&t=" + (new Date).getTime(), function(ret) {

                if (ret.code == 0) {
                    //如果登录成功，则把账号信息保存在cookie当中
                    if (rememberStatus){
                        console.log("勾选了记住密码，现在开始写入cookie");
                        util.setCookie('accountInfo',accountInfo,1440*3);
                    }
                    else{
                        console.log("没有勾选记住密码，现在开始删除账号cookie");
                        util.delCookie('accountInfo');
                    }

                    // 若为本地环境 则手写cookie
                    if (window.location.href.indexOf('localhost') != -1){
                        util.setCookie('token','zhaopeng_58e0cbbea951f0e79fafcee80da522b8',1440);
                    }
                    // console.log(window.location.href)
                    console.log('登录的返回值为0');
                    router.push({path:'/'});
                } else {
                    util.showDialog('error','账号名或密码错误!');
                }
            }, "json");

        },
        doRememberPassword: function(event){
            let mySelf = this;
            let rememberStatus = mySelf.rememberPassword;
            // event.preventDefault();
            mySelf.rememberPassword = !rememberStatus;
            //如果去掉勾选，则删掉cookie
            // if (!rememberStatus){

            // }
            // mySelf.rememberPassword = false;
        },
        loadAccountInfo: function(){

            let mySelf = this;
            //zhaopeng&A15hOsu8YeGnCsjb
            let accountInfo = util.getCookie('accountInfo');

            //如果cookie里没有账号信息
            if(Boolean(accountInfo) == false){
                console.log('cookie中没有检测到账号信息！');
                return false;
            }
            else{
            //如果cookie里有账号信息
                console.log('cookie中检测到账号信息！现在开始预填写！');
                let userName = "";
                let passWord = "";
                let index = accountInfo.indexOf("&");

                userName = accountInfo.substring(0,index);
                passWord = accountInfo.substring(index+1);

                mySelf.userName = userName;
                mySelf.passWord = passWord;
                mySelf.rememberPassword = true;
            }
        }

    }
}

操作cookie逻辑js

// 设置cookie
setCookie: function(c_name,value,expiremMinutes){
    var exdate = new Date();
    exdate.setTime(exdate.getTime() + expiremMinutes * 60 * 1000);
    document.cookie= c_name + "=" + escape(value)+((expiremMinutes==null) ? "" : ";expires="+exdate.toGMTString());
},

// 读取cookie
getCookie: function(c_name){
    if (document.cookie.length>0)
    {
        var c_start=document.cookie.indexOf(c_name + "=");
        if (c_start!=-1)
        {
        c_start=c_start + c_name.length+1;
        var c_end=document.cookie.indexOf(";",c_start);
        if (c_end==-1)
            c_end = document.cookie.length
            return unescape(document.cookie.substring(c_start, c_end))
        }
    }
    return ""
},

// 删除cookie
delCookie: function(c_name){
    var exp = new Date();
    exp.setTime(exp.getTime() - 1);
    var cval = this.getCookie(c_name);
    if(cval!=null){
        document.cookie = c_name + "=" + cval + ";expires=" + exp.toGMTString();
    }
},