vue3 数据可视化大屏项目开发中，登录页面一般都需要记住密码功能，我们来实现这种功能。

使用组件

引入组件

import rememberPwd from "./rememberPwd.vue";

使用

components: {rememberPwd},
<rememberPwd ref="rememberPassword" v-model:password="username" v-model:username="password"></rememberPwd>

登录触发记录

我们要在登录的时候完成记住密码的方法触发

this.$refs.rememberPassword.rememberPassword();

组件代码

vue2的风格来写的组件

/**
* @Author: 858834013@qq.com
* @Name: rememberPwd
* @Date: 2022-07-09
* @Desc: 记住密码
*/
<template>
  <div class="rememberPwd">
    <el-checkbox fill="#24cdff" v-model="rememberPwd">记住密码</el-checkbox>
  </div>
</template>

<script>

export default {
  name: "rememberPwd",
  components: {},
  props: {
    password: {
      type: String,
      default() {
        return '';
      }
    },
    username: {
      type: String,
      default() {
        return '';
      }
    },
  },
  data() {
    return {
      rememberPwd: false
    }
  },
  watch: {
    rememberPwd() {
      localStorage.setItem('rememberPwd', this.rememberPwd)
    }
  },
  mounted() {
    const username = localStorage.getItem('username');
    const password = localStorage.getItem('password');
    const rememberPwd = localStorage.getItem('rememberPwd');
    if (rememberPwd) {
      this.rememberPwd = true
    } else {
      this.rememberPwd = false
    }
    if (this.rememberPwd) {
      this.$emit('update:username', username)
      this.$emit('update:password', password)
    } else {
    }
  },
  methods: {
    rememberPassword() {
      if (this.rememberPwd) {
        localStorage.setItem('username', this.username);
        localStorage.setItem('password', this.password);
        localStorage.setItem('rememberPwd', true);
      } else {
        localStorage.removeItem('username');
        localStorage.removeItem('password');
        localStorage.removeItem('rememberPwd');
      }
    },
  }
}
</script>

<style lang="scss" scoped>
.rememberPwd {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: nowrap;
  flex-direction: row;
  align-content: flex-start;
}


</style>

<style lang="scss">
.rememberPwd {
  .el-checkbox {


    .el-checkbox__label {
      //color: #fff;
      color: rgba(255, 255, 255, 1);
      font-size: 14px;
      padding-left: 8px;
    }

    .el-checkbox__inner {
      background: none;
      border: 1px solid rgba(64, 135, 214, 1.00);
    }
  }

  .el-checkbox.is-checked {
    .el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner {
      background-color: rgba(64, 135, 214, 1.00);
    }

    .el-checkbox__label {
      color: rgba(64, 135, 214, 1.00);
    }
  }
}
</style>

vue3写法

/**
* @Author: 858834013@qq.com
* @Name: rememberPwd
* @Date: 2023年07月29日06:14:46
* @Desc: 记住密码
*/
<template>
  <div class="rememberPwd">
    <el-checkbox fill="#24cdff" v-model="rememberPwd">记住密码</el-checkbox>
  </div>
</template>

<script>
import { ref, watch, onMounted } from 'vue';

export default {
  name: "rememberPwd",
  props: {
    password: String,
    username: String,
  },
  setup(props, context) {
    const rememberPwd = ref(false);

    watch(rememberPwd, (newVal) => {
      localStorage.setItem('rememberPwd', newVal);
      rememberPassword();
    });

    onMounted(() => {
        let username = localStorage.getItem('username');
      let password = localStorage.getItem('password');
      const rememberPwdStatus = localStorage.getItem('rememberPwd');

      if(username) {
        username = decrypt(username);
      }

      if(password) {
        password = decrypt(password);
      }
      
      if (rememberPwdStatus) {
        rememberPwd.value = true
      } else {
        rememberPwd.value = false
      }
      if (rememberPwd.value) {
        context.emit('update:username', username)
        context.emit('update:password', password)
      }
    });

    function rememberPassword() {
      if (rememberPwd.value) {
        localStorage.setItem('username', props.username);
        localStorage.setItem('password', props.password);
        localStorage.setItem('rememberPwd', true);
      } else {
        localStorage.removeItem('username');
        localStorage.removeItem('password');
        localStorage.removeItem('rememberPwd');
      }
    }

    return {
      rememberPwd,
      rememberPassword,
    }
  },
}
</script>

<style lang="scss" scoped>
.rememberPwd {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: nowrap;
  flex-direction: row;
  align-content: flex-start;
}


</style>

<style lang="scss">
.rememberPwd {
  .el-checkbox {


    .el-checkbox__label {
      //color: #fff;
      color: rgba(255, 255, 255, 1);
      font-size: 14px;
      padding-left: 8px;
    }

    .el-checkbox__inner {
      background: none;
      border: 1px solid rgba(64, 135, 214, 1.00);
    }
  }

  .el-checkbox.is-checked {
    .el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner {
      background-color: rgba(64, 135, 214, 1.00);
    }

    .el-checkbox__label {
      color: rgba(64, 135, 214, 1.00);
    }
  }
}
</style>

加密处理

明文记住密码可能并不安全，所以我们再进行一下加密处理，这样在localStorage中存储的数据就不会被直接看到了。

/**
* @Author: 858834013@qq.com
* @Name: rememberPwd
* @Date: 2023年07月29日06:22:06
* @Desc: 记住密码加密版
*/
<template>
  <div class="rememberPwd">
    <el-checkbox fill="#24cdff" v-model="rememberPwd">记住密码</el-checkbox>
  </div>
</template>

<script>
import { ref, watch, onMounted } from 'vue';
import CryptoJS from "crypto-js";

export default {
  name: "rememberPwd",
  props: {
    password: String,
    username: String,
  },
  setup(props, context) {
    const rememberPwd = ref(false);
    const secretKey = "your-secret-key";  // 这只是一个示例，你应该使用一个安全的密钥

    watch(rememberPwd, (newVal) => {
      localStorage.setItem('rememberPwd', newVal);
      rememberPassword();
    });

    onMounted(() => {
      let username = localStorage.getItem('username');
      let password = localStorage.getItem('password');
      const rememberPwdStatus = localStorage.getItem('rememberPwd');

      if(username) {
        username = decrypt(username);
      }

      if(password) {
        password = decrypt(password);
      }

      if (rememberPwdStatus) {
        rememberPwd.value = true
      } else {
        rememberPwd.value = false
      }
      if (rememberPwd.value) {
        context.emit('update:username', username);
        context.emit('update:password', password);
      }
    });

    function rememberPassword() {
      if (rememberPwd.value) {
        localStorage.setItem('username', encrypt(props.username));
        localStorage.setItem('password', encrypt(props.password));
        localStorage.setItem('rememberPwd', true);
      } else {
        localStorage.removeItem('username');
        localStorage.removeItem('password');
        localStorage.removeItem('rememberPwd');
      }
    }

    function encrypt(text) {
      return CryptoJS.AES.encrypt(text, secretKey).toString();
    }

    function decrypt(ciphertext) {
      const bytes = CryptoJS.AES.decrypt(ciphertext, secretKey);
      return bytes.toString(CryptoJS.enc.Utf8);
    }

    return {
      rememberPwd,
      rememberPassword,
    }
  },
}
</script>

<style lang="scss" scoped>
.rememberPwd {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: nowrap;
  flex-direction: row;
  align-content: flex-start;
}


</style>

<style lang="scss">
.rememberPwd {
  .el-checkbox {


    .el-checkbox__label {
      //color: #fff;
      color: rgba(255, 255, 255, 1);
      font-size: 14px;
      padding-left: 8px;
    }

    .el-checkbox__inner {
      background: none;
      border: 1px solid rgba(64, 135, 214, 1.00);
    }
  }

  .el-checkbox.is-checked {
    .el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner {
      background-color: rgba(64, 135, 214, 1.00);
    }

    .el-checkbox__label {
      color: rgba(64, 135, 214, 1.00);
    }
  }
}
</style>