Vue는 쿠키에 대한 비밀번호를 기억하는 방법을 구현합니다.

일반적인 아이디어는 로그인 페이지에 들어갈 때마다 쿠키를 먼저 읽고, 브라우저의 쿠키에 계정 정보가 있으면 로그인 상자에 자동으로 채워지는 것입니다. 쿠키는 로그인 중입니다. 로그인에 성공하면 현재 사용자가 비밀번호 기억을 확인했는지 여부를 확인하여 해당 계정 정보를 쿠키에 저장합니다.

기능 구현:

1. 비밀번호 기억을 확인하세요. 로그인을 클릭하면 계정과 비밀번호가 쿠키에 저장되며, 다음 로그인 시 자동으로 양식에 표시됩니다. 2. 선택을 취소하면 로그인 클릭, 이전 저장 지우기 쿠키 값은 다음 로그인 시 수동으로 입력해야 합니다

메인 코드로 바로 이동

HTML 부분

<p class="ms-login">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="0px" class="demo-ruleForm">
            <el-form-item prop="username">
                <el-input v-model="ruleForm.username" placeholder="用户名"></el-input>
            </el-form-item>
            <el-form-item prop="password">
                <el-input type="password" placeholder="密码" v-model="ruleForm.password" @keyup.enter.native="submitForm(&#39;ruleForm&#39;)"></el-input>
            </el-form-item>
            <!-- `checked` 为 true 或 false -->
            <el-checkbox v-model="checked">记住密码</el-checkbox>
            <br>
            <br>
            <p class="login-btn">
                <el-button type="primary" @click="submitForm(&#39;ruleForm&#39;)">登录</el-button>
            </p>
        </el-form>
    </p>

JS 부분

    //页面加载调用获取cookie值
    mounted() {
        this.getCookie();
    },
    methods: {
        submitForm(formName) {
                         const self = this;
                        //判断复选框是否被勾选 勾选则调用配置cookie方法
                        if (self.checked == true) {
                            console.log("checked == true");
                            //传入账号名，密码，和保存天数3个参数
                            self.setCookie(self.ruleForm.username, self.ruleForm.password, 7);
                        }else {
                          console.log("清空Cookie");
                          //清空Cookie
                          self.clearCookie();
                        }
                        
                        //与后端请求代码，本功能不需要与后台交互所以省略
                        
                        console.log("登陆成功");
                  
                });
            },
            //设置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: 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.ruleForm.username = arr2[1]; //保存到保存数据的地方
                        } else if (arr2[0] == 'userPwd') {
                            this.ruleForm.password = arr2[1];
                        }
                    }
                }
            },
            //清除cookie
            clearCookie: function() {
                this.setCookie("", "", -1); //修改2值都为空，天数为负1天就好了
            }

브라우저에 있는 쿠키 정보는 여기에서 쿠키의 만료/Max-Age에 주의하세요. 시간은 그리니치 표준시(GMT)이며, 세계 통일 시간은 GMT+8시간입니다.

관련 추천:

h5 비밀번호 기억 기능 구현 방법

비밀번호 기억을 위한 10가지 사용 코드 요약 추천

js 함수의 비밀번호

위 내용은 Vue는 쿠키에 대한 비밀번호를 기억하는 방법을 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!