vue aes如何保存 key vue aes解密

目录

1，安装（执行以下命令）

2，在util文件夹下 建立 aes.js

3，在项目使用

4，完整页面代码如下：

---

1，安装（执行以下命令）

npm install crypto-js --save-dev

运行结果：

2，在util文件夹下 建立 aes.js

import CryptoJS from 'crypto-js'

export default {
  // 随机生成指定数量的16进制key
  generatekey(num) {
    var library = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'
    let key = ''
    for (var i = 0; i < num; i++) {
      var randomPoz = Math.floor(Math.random() * library.length)
      key += library.substring(randomPoz, randomPoz + 1)
    }
    return key
  },

  // 加密
  encrypt(word, keyStr) {
    // keyStr = 'abcdsxyzhkj12345' // 判断是否存在ksy，不存在就用定义好的key
    var key = CryptoJS.enc.Utf8.parse(keyStr)
    var srcs = CryptoJS.enc.Utf8.parse(word)
    var encrypted = CryptoJS.AES.encrypt(srcs, key, { mode: CryptoJS.mode.ECB, padding: CryptoJS.pad.Pkcs7 })
    return encrypted.toString()
  },
  // 解密
  decrypt(word, keyStr) {
    // keyStr = 'abcdsxyzhkj12345'
    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()
  }

}

3，在项目使用

import AES from '@/utils/aes.js'

// 如果是对象/数组的话，需要先JSON.stringify转换成字符串
this.aesMStr = AES.encrypt(this.aseStr, this.aesKey) // 加密
this.aesJStr = AES.decrypt(this.aesMStr, this.aesKey) // 解密

4，完整页面代码如下：

<template>
  <div class="aes-container">
    <van-row>
      <van-col span="24">
        <img src="../../assets/img/demo/aes/aescrypt_header.png" height="100" width="100%"/>
        <van-cell-group>
          <van-field label="aesKey" v-model="aesKey" value="" readonly />
        </van-cell-group>
        <van-field v-model="aseStr" rows="2" autosize label="加密前数据" type="textarea" maxlength="50" placeholder="请输入……" show-word-limit @input="aseStrChonge()"></van-field>
        <van-field v-model="aesMStr" rows="2" autosize label="加密后密文" type="textarea" placeholder="请输入……" show-word-limit ></van-field>
        <van-field v-model="aesJStr" rows="2" autosize label="解密后数据" type="textarea" placeholder="请输入……" show-word-limit></van-field>
        <van-notice-bar color="#1989fa" background="#ecf9ff" left-icon="info-o">
          每次页面打开随机获取16位加密Key(项目使用时请固定)
        </van-notice-bar>
        <van-notice-bar color="#1989fa" background="#ecf9ff" left-icon="info-o">
          如果是对象/数组的话，需要先JSON.stringify转换成字符串
        </van-notice-bar>
      </van-col>
    </van-row>
  </div>
</template>
<script>
import AES from '@/utils/aes.js'
export default {
  data() { // 定义数据
    return {
      aseStr: '', // aes 加密前数据
      aesKey: '', // aes 加密key
      aesMStr: '', // aes 加密后数据
      aesJStr: '' // aes 解密后数据
    }
  },
  mounted() { // 此时已经将编译好的模板，挂载到了页面指定的容器中显示
    this.aesKey = AES.generatekey(16) // 随机获取16位加密Key
  },
  methods: { // 定义方法
    aseStrChonge() {
      // 如果是对象/数组的话，需要先JSON.stringify转换成字符串
      this.aesMStr = AES.encrypt(this.aseStr, this.aesKey) // 加密
      this.aesJStr = AES.decrypt(this.aesMStr, this.aesKey) // 解密
    }
  },
  filters: {}, // 定义私有过滤器
  directives: {}, // 定义私有指令
  components: {}, // 定义实例内部私有组件的
  beforeCreate() { }, // 实例刚在内存中被创建出来，此时，还没有初始化好 data 和 methods 属性
  created() { }, // 实例已经在内存中创建OK，此时data和methods已经创建OK，此时还没有开始编译模板
  beforeMount() { }, // 此时已经完成了模板的编译，但是还没有挂载到页面中
  beforeUpdate() { }, // 状态更新之前执行此函数， 此时 data 中的状态值是最新的，但是界面上显示的 数据还是旧的，因为此时还没有开始重新渲染DOM节点
  updated() { }, // 实例更新完毕之后调用此函数，此时 data 中的状态值 和 界面上显示的数据，都已经完成了更新，界面已经被重新渲染好了！
  beforeDestroy() { }, // 实例销毁之前调用。在这一步，实例仍然完全可用。
  destroyed() { } // Vue实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。
}

</script>