vue - vue使用Crypto.js进行加密解密

vue使用Crypto.js进行加密解密；
使用效果图如下：
1，在输入框中 输入内容，点击加密；
2，然后把加密后的密文 复制到输入框中； 点击输入密文，点击解密；
3，点击 清空 ，清空所有数据；

---

1，npm安装

因为这个库在在生产环境是会用到的，所以安装时要使用 --save；

npm install crypto-js --save

2，组件中引入

const CryptoJS = require('crypto-js');

3，开始使用

需要注意的是：setPassword和getPassword分别为加密方法和解密方法；
大家还可以自己进行封装一下，引入使用；

<template>
  <div >
    <!-- 加密 和解密 -->
    <hr />
    <div class="Crypto">
      <h3>Crypto.js加解密演示：</h3>
      <input type="text" placeholder="请输入密码" v-model="password" />
      <button @click="setPasswordClick">输入内容,点击加密</button>
      <button @click="getPasswordClick">输入密文,点击解密</button>
      <button @click="clear">清空</button>
      <p>加密后的密码 is: {{ setPasswordText }}</p>
      <p>解密后的密码 is: {{ getPasswordText }}</p>
    </div>
  </div>
</template>

<script>

const CryptoJS = require('crypto-js');

export default {
  data() {
    return {
      setPasswordText: '',
      getPasswordText: '',
      password: '',
    };
  },

  methods: {
    // 清除关于加密的数据
    clear() {
      this.password = '';
      this.setPasswordText = '';
      this.getPasswordText = '';
    },
    // 点击加密
    setPasswordClick() {
      if (!this.password) {
        return alert('请输入需要加密的密码！');
      }
      this.setPasswordText = this.setPassword(this.password);
    },
    // 点击解密
    getPasswordClick() {
      if (this.password) {
        console.log('开始解密');
        this.getPasswordText = this.getPassword(this.password);
        if (!this.getPasswordText) {
          return alert('请输入正确的密文！');
        }
        return;
      }
      console.log('解密后的数据:', this.getPasswordText);
      this.getPasswordText = this.getPassword(this.setPasswordText);
    },
    /**
     * @encription: 加密
     * @param {*} word 需要加密的内容
     * @param {*} keyStr 自定义秘钥
     */
    setPassword(word, keyStr) {
      keyStr = 'abcdefgabcdefg12'; // 16位的密钥，自己定义，和下面的密钥要相同
      var key = CryptoJS.enc.Utf8.parse(keyStr); //  字符串到数组转换，解析秘钥
      var srcs = CryptoJS.enc.Utf8.parse(word); //  字符串到数组转换，解析明文
      // mode:加密方式；padding:填充方式；iv便宜向量（可选）
      var encrypted = CryptoJS.AES.encrypt(srcs, key, {
        mode: CryptoJS.mode.ECB,
        padding: CryptoJS.pad.Pkcs7,
      });
      return encrypted.toString(); // 加密后的结果是对象，要转换为文本
    },

    /**
     * @description: 解密
     * @param {*} word 需要解密的内容
     * @param {*} keyStr 自定义秘钥 需要和加密时使用的一致
     */
    getPassword(word, keyStr) {
      keyStr = 'abcdefgabcdefg12'; // 16位的密钥，自己定义，和下面的密钥要相同
      var key = CryptoJS.enc.Utf8.parse(keyStr); //  字符串到数组转换
      var decrypt = CryptoJS.AES.decrypt(word, key, {
        mode: CryptoJS.mode.ECB,
        padding: CryptoJS.pad.Pkcs7,
      });
      return CryptoJS.enc.Utf8.stringify(decrypt).toString(); //  数组到字符串转
    },
  },
};
</script>
<style lang="scss" scoped>
.Crypto{
    h3{
        margin: 5px 0;
    }
    margin-top: 10px;
    button{
        margin: 0 5px;
    }
}
</style>