记住密码功能

1、布局样式；

<div class="login_info">
                    <el-form ref="loginForm" :model="loginForm" :rules="loginRules">
                        <el-form-item class="item" prop="username">
                            <img class="itemImg" src="../assets/images/login/user.png" alt=""/>
                            <el-input v-model="loginForm.username" placeholder="账  号"></el-input>
                        </el-form-item>
                        <el-form-item class="item" prop="password">
                            <img class="itemImg" src="../assets/images/login/password.png" alt=""/>
                            <el-input v-model="loginForm.password" placeholder="密  码" @keyup.enter.native="handleLogin" auto-complete="off" type="password" show-password></el-input>
                        </el-form-item>
                        <el-checkbox class="remember" v-model="loginForm.rememberMe"><span style="color:#fff;">记住密码</span></el-checkbox>
                        <div class="login_btns">
                            <span v-if="!loading" @click="handleLogin">登录</span>
                            <span v-else>登录中...</span>
                        </div>
                    </el-form>
                </div>

2、js代码:

<script>
export default {
  name: "Login",
  data() {
    return {
      loginForm: {
        username: "",
        password: "",
        rememberMe: false,
      },
      loginRules: {
        username: [
          { required: true, trigger: "blur", message: "请输入您的账号" },
        ],
        password: [
          { required: true, trigger: "blur", message: "请输入您的密码" },
        ],
        code: [{ required: true, trigger: "change", message: "请输入验证码" }],
      },
      loading: false,
    };
  },
  created() {
    this.getCookie();
  },
  methods: {
    getCookie() {
      const username = Cookies.get("username");
      const password = Cookies.get("password");
      const rememberMe = Cookies.get("rememberMe");
      // 需要使用js-cookie管理工具
      this.loginForm = {
        username: username === undefined ? this.loginForm.username : username,
        password:password === undefined ? this.loginForm.password :this.decode64(password),
        // 密码进行加密处理需要使用js-base64编码工具
        rememberMe: rememberMe === undefined ? false : Boolean(rememberMe),
      };
    },
    handleLogin() {
      this.$refs.loginForm.validate((valid) => {
        if (valid) {
          this.loading = true;
          if (this.loginForm.rememberMe) {
            //为当前页创建有效期30天的cookie
            Cookies.set("username", this.loginForm.username, { expires: 30 });
            Cookies.set("password", this.encode64(this.loginForm.password), {
              expires: 30,
            });
            Cookies.set("rememberMe", this.loginForm.rememberMe, {
              expires: 30,
            });
          } else {
            Cookies.remove("username");
            Cookies.remove("password");
            Cookies.remove("rememberMe");
          }
        }
      });
    },
  },
};
</script>