vue项目实现表单登录页保存账号和密码到cookie功能

<!--
 * @Descripttion: 登录页面
 * @version: 
 * @Author: zhangfan
 * @email: 2207044692@qq.com
 * @Date: 2020-07-25 14:47:13
 * @LastEditors: zhangfan
 * @LastEditTime: 2020-08-05 17:38:43
--> 
<template>
  <div class="login">
    <div class="login-con">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>欢迎登录</span>
        </div>
        <div class="login-box">
          <el-form ref="loginForm" :rules="rules" :model="ruleForm" label-width="0px">
            <el-form-item prop="userName" label-width="0px">
              <el-input
                v-model="ruleForm.userName"
                placeholder="企业账号/业主账号"
                prefix-icon="iconfont iconzhanghao"
                clearable
              ></el-input>
            </el-form-item>
            <el-form-item prop="password">
              <el-input
                type="password"
                prefix-icon="iconfont iconmima"
                clearable
                placeholder="输入登录密码"
                v-model="ruleForm.password"
                show-password
              ></el-input>
            </el-form-item>
            <el-form-item class="clearfix checked" prop="checked">
              <el-checkbox v-model="ruleForm.checked">保存登录</el-checkbox>
              <div class="findPassword fr">
                <el-link @click="skipPassword" :underline="false">忘记密码？</el-link>
              </div>
            </el-form-item>
            <div class="login-btn">
              <el-button
                type="primary"
                class="submitBtnBox"
                @click="handleSubmit()"
                :loading="canLogin"
              >登录</el-button>
            </div>
          </el-form>
        </div>
        <p class="login-tip">输入任意用户名和密码即可</p>
      </el-card>
    </div>
  </div>
</template>

<script>
export default {
  name: "login",
  data() {
    return {
      canLogin: false,
      ruleForm: {
        userName: "",
        password: "",
        checked: "",
      },
      rules: {
        userName: [
          { required: true, message: "请输入用户名", trigger: "blur" },
        ],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
      },
    };
  },
  mounted() {
    this.getCookie();
  },
  methods: {
    /**
     * @description: 跳转到找回密码页面
     */
    skipPassword() {},
    /**
     * @description: 调用接口登录
     */
    handleSubmit() {
      const vm = this;
      vm.$refs.loginForm.validate((valid) => {
        if (valid) {
          vm.canLogin = true;
          //判断复选框是否被勾选 勾选则调用配置cookie方法
          if (vm.ruleForm.checked == true) {
            //传入账号名，密码，和保存天数3个参数
            vm.setCookie(
              vm.ruleForm.userName.replace(/\s+/g, ""),
              vm.ruleForm.password.replace(/\s+/g, ""),
              7
            );
          } 
        }
      });
    },
    /**
     * @description: 设置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();
    },
    /**
     * @description: 读取cookie
     */
    getCookie: function () {
      if (document.cookie.length > 0) {
        console.log(document.cookie);
        var arr = document.cookie.split("; ");
        console.log(arr);
        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];
          }
        }
      }
    },
    /**
     * @description: 清除cookie
     */
    clearCookie: function () {
      this.setCookie("", "", -1); //修改2值都为空，天数为负1天就好了
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
@import "./login.less";
</style>