vue 登录页记住密码

HTML

<el-form-item>
    <div style="text-align: right">
    	<el-checkbox v-model="rememberPwd">记住密码</el-checkbox>
    </div>
</el-form-item>
<el-form-item>
	<el-button class="login-btn" type="primary" @click="onSubmit">登录</el-button>
</el-form-item>

JS

data(){
	retun{
		rememberPwd:false,
	}
},
//页面每次显示获取cookie
mounted() {
	this.getCookie();
},
//登录
onSubmit() {
     // 为表单绑定验证功能
     let that = this;
     //验证账号密码，编辑登录逻辑 成功则执行是否选择记住密码
     if(that.rememberPwd){
           that.setCookie(that.form.telphone, this.form.pwd, 7); // 保存期限为7天
     }            
},
//存储cookie
setCookie(c_name, c_pwd, exdays) {
     var exdate = new Date(); //获取时间
     exdate.setTime(exdate.getTime() + 24 * 60 * 60 * 1000 * exdays); //保存的天数
     //字符串拼接cookie
     window.document.cookie = "userName" + "=" + c_name + ";path=/;expires=" + exdate.toGMTString();
     window.document.cookie = "userPwd" + "=" + c_pwd + ";path=/;expires=" + exdate.toGMTString();
            },
//读取cookie
getCookie(){
	if (document.cookie.length > 0) {
    	var arr = document.cookie.split('; '); //这里显示的格式需要切割一下自己可输出看下
        for (var i = 0; i < arr.length; i++) {
	        var arr2 = arr[i].split('='); //再次切割
	        //判断查找相对应的值
            if (arr2[0] == 'userName') {
            	this.form.telphone = arr2[1]; //保存到保存数据的地方
            } else if (arr2[0] == 'userPwd') {
            	this.form.pwd = arr2[1];
            }
        }
     }
},
//清除cookie
clearCookie(){
	this.setCookie("", "", -1); //修改2值都为空，天数为负1天就好了
},

登录页完整代码

<template>
    <div class="bgColor" :style="'height:'+fullHeight+'px;'">
        <div class="login-left">
            <div class="l-l-t">
                <img class="login-logo-img" src="../assets/login-logo.png" alt="">
                <img src="../assets/login-title.png" alt="">
                <div class="border-1"></div>
                <div class="login-type">普查员登录</div>
            </div>
            <div class="l-l-b">
                <div class="login-name">南康统计</div>
                <div class="login-name-english">NANKANG STATISTICS</div>
            </div>
        </div>
        <div class="login-right">
            <div class="login-type-wrap">
                <el-form ref="loginForm" :model="form" :rules="rules" label-width="0" class="login-box">
                    <h3 class="login-title"><span>登录中心</span></h3>
                    <el-form-item prop="telphone">
                        <el-input type="text" @keyup.enter.native="onSubmit" placeholder="请输入账号" v-model="form.telphone"/>
                    </el-form-item>
                    <el-form-item prop="pwd">
                        <el-input type="password" @keyup.enter.native="onSubmit" placeholder="请输入密码" v-model="form.pwd"/>
                    </el-form-item>
                    <el-form-item>
                        <div style="text-align: right">
                            <el-checkbox v-model="rememberPwd">记住密码</el-checkbox>
                        </div>
                    </el-form-item>
                    <el-form-item>
                        <el-button class="login-btn" type="primary" @click="onSubmit">登录</el-button>
                    </el-form-item>
                </el-form>
            </div>

        </div>
    </div>
</template>
<script>
    import {login} from '@/api/index'

    export default {
        name: "Login",
        data() {
            return {
                fullHeight: document.documentElement.clientHeight,
                form: {
                    telphone: '',
                    pwd: ''
                },
                rememberPwd: false,
                // 表单验证，需要在 el-form-item 元素中增加 prop 属性
                rules: {
                    telphone: [
                        {required: true, message: '账号不可为空', trigger: 'blur'}
                    ],
                    pwd: [
                        {required: true, message: '密码不可为空', trigger: 'blur'}
                    ]
                },
            }
        },
        watch: {
            fullHeight(val) {//监控浏览器高度变化
                if (!this.timer) {
                    this.fullHeight = val
                    this.timer = true
                    let that = this
                    setTimeout(function () {
                        that.timer = false
                    }, 400)
                }

            },

        },
        mounted() {
            this.get_bodyHeight()
            this.getCookie();

        },
        methods: {
            get_bodyHeight() {//动态获取浏览器高度
                const that = this
                window.onresize = () => {
                    return (() => {
                        window.fullHeight = document.documentElement.clientHeight
                        that.fullHeight = window.fullHeight
                    })()
                }
            },
            onSubmit() {
                // 为表单绑定验证功能
                let that = this;
                this.$refs['loginForm'].validate((valid) => {
                    if (valid) {
                        // 使用 vue-router 路由到指定页面，该方式称之为编程式导航
                        //直接赋值会有弱绑定 到时候表单里面的值会跟着一起加密
                        let formData = Object.assign({}, this.form);
                        formData.pwd = this.$md5(formData.pwd).toUpperCase();
                        login(formData).then(res => {
                            if(res.RetCode == 100){

                                if(that.rememberPwd){
                                    that.setCookie(that.form.telphone , this.form.pwd, 7); // 保存期限为7天
                                }
                                this.$message.success("登录成功");
                                localStorage.setItem("account",JSON.stringify(res.data));
                                this.$router.push('/m/collect')
                            }else{
                                this.$message.warning(res.Msg)
                            }
                        })
                        // this.$router.push("/about");
                    } else {
                        this.dialogVisible = true;
                        return false;
                    }
                });
            },
            setCookie(c_name, c_pwd, exdays) {
                var exdate = new Date(); //获取时间
                exdate.setTime(exdate.getTime() + 24 * 60 * 60 * 1000 * exdays); //保存的天数
                //字符串拼接cookie
                window.document.cookie = "userName" + "=" + c_name + ";path=/;expires=" + exdate.toGMTString();
                window.document.cookie = "userPwd" + "=" + c_pwd + ";path=/;expires=" + exdate.toGMTString();
            },
            //读取cookie
            getCookie: function() {
                if (document.cookie.length > 0) {
                    var arr = document.cookie.split('; '); //这里显示的格式需要切割一下自己可输出看下
                    for (var i = 0; i < arr.length; i++) {
                        var arr2 = arr[i].split('='); //再次切割
                        //判断查找相对应的值
                        if (arr2[0] == 'userName') {
                            this.form.telphone = arr2[1]; //保存到保存数据的地方
                        } else if (arr2[0] == 'userPwd') {
                            this.form.pwd = arr2[1];
                        }
                    }
                }
            },
            //清除cookie
            clearCookie: function() {
                this.setCookie("", "", -1); //修改2值都为空，天数为负1天就好了
            },
            handleClose() {

            },
        }
    }
</script>

<style scoped lang="scss">

    .bgColor {
        width: 100vw;
        display: flex;
    }

    .login-left {
        /*background: url("../assets/login-bg.png") center center no-repeat;*/
        /*background-size: 100% 100%;*/
        background-image: url("../assets/login-bg.png");
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        width: 70%;
    }

    .l-l-t {
        margin: 76px 60px;
        display: flex;
        align-items: center;
    }

    .l-l-b {
        margin: 20vh 0 0 156px;
        color: #FFFFFF;
    }

    .login-right {
        flex: 1;
    }

    .login-logo-img {
        margin-right: 24px;
    }

    .login-name {
        height: 80px;
        font-size: 80px;
        font-family: SourceHanSansCN-Bold;
        line-height: 80px;
        letter-spacing: 26px;
    }

    .border-1 {
        background-color: #FFF;
        width: 2px;
        height: 30px;
        margin: 0 20px;
    }

    .login-type {
        font-size: 24px;

        font-family: SourceHanSansCN-Light;
        color: #FFFFFF;
    }

    .login-name-english {
        margin-top: 34px;
        height: 30px;
        font-size: 30px;
        font-family: SourceHanSansCN-Bold;
        line-height: 30px;
        letter-spacing: 5px;
    }

    .login-box {
        /*border: 1px solid #DCDFE6;*/
        width: 350px;
        margin: 180px auto;
        padding: 35px 35px 15px 35px;
        border-radius: 5px;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        /*box-shadow: 0 0 25px #909399;*/
    }

    .login-btn {
        width: 100%;
    }

    .login-title {
        margin: 20px auto;
        padding: 15px 0;
        color: #1D2860;
        position: relative;
        span {
            &:after {
                content: '';
                position: absolute;
                bottom: 0;
                height: 4px;
                left: 0;
                background-color: #1D2860;
                width: 4em;
                border-radius: 5px;
            }
        }
    }

</style>