博客

一、在登录页面的标签中加入一个checkbox v-model绑定它的checked

<div class="rt">
            <el-checkbox v-model="checked" style="color:#a0a0a0;">一周内自动登录</el-checkbox>
</div>

二、在data中定义checked：false


默认是不选中的


三、在methods中写出，设置、读取以及去除cookie的函数

 //设置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 = "password" + "=" + 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') {
                    //  console.log(arr2[1])
                      this.loginForm.username = arr2[1]; //保存到保存数据的地方
                  } else if (arr2[0] == 'password') {
                    // console.log(arr2[1])
                      this.loginForm.password = arr2[1];
                  }
              }
               this.checked = true;
          }
      },
      //清除cookie
      clearCookie: function() {
          this.setCookie("", "", -1); //修改2值都为空，天数为负1天就好了
      }

四、 在mounted中调用读取cookie



五、在登录成功后进行判断

      //判断复选框是否被勾选 勾选则调用配置cookie方法
            if (this.checked == true) {
                //传入账号名，密码，和保存天数3个参数
                this.setCookie(this.loginForm.username, this.loginForm.password, 7);
            }else {
              console.log("清空Cookie");
              //清空Cookie
              this.clearCookie();
          }