Vue登录页面之前端利用cookie记住密码

Vue登录页面之前端利用cookie记住密码

1、html

	  <el-button 
	  	:loading="loading" 
	  	type="primary" 
	  	style="width:100%;margin-bottom:30px;" 
	  	@click.native.prevent="handleLogin">
	  	登录
	  </el-button>
	  <div style="text-align:right; width:100%">
        <el-checkbox v-model="checked" style="float:left; text-align:left;">记住密码</el-checkbox>
      </div>

2、script

export default {
  data() {
    return {
      loginForm: {
        username: '14725836912',
        password: '123456789'
      }，
      checked: false
    }
  },
  
  mounted() {
  //获取cookie值
    this.getCookie();
  },

   methods: {
    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.loginForm.username = arr2[1]; //保存到保存数据的地方
                        } else if (arr2[0] == 'userPwd') {
                            this.loginForm.password = arr2[1];
                        }
                    }
                }
            },
    handleLogin() {
      const self = this;
      //判断复选框是否被勾选 勾选则调用配置cookie方法
      if (self.checked == true) {
          console.log("checked == true");
             //传入账号名，密码，和保存天数3个参数
          self.setCookie(self.loginForm.username, self.loginForm.password, 7);
      }else {
            console.log("清空Cookie");
            //清空Cookie操作一下
            self.clearCookie();
            }
      }
    }
 }
 }