手把手教学 Vue使用MD5和AES对称加密步骤 亲测开箱即用

在Vue项目中使用MD5加密

一、首先安装

npm install --save js-md5

二、局部导入(在需要使用的项目文件中引入)

import md5 from 'js-md5';

使用

md5('holle')  // bcecb35d0a12baad472fbe0392bcc043

三、全局导入

找到mian.js，将md5挂载到vue的原型上

import md5 from 'js-md5'; //先导入
Vue.prototype.$md5 = md5; //全局挂载

在需要使用的文件下进行使用

this.$md5('holle') // bcecb35d0a12baad472fbe0392bcc043

在Vue项目中使用AES对称加密

一、安装

npm install crypto-js --save-dev

二、在VUE目录的src文件夹中的utils公用文件夹中添加文件AES.js，在文件中添加代码。

import CryptoJS from "crypto-js";

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

  //加密
  encrypt(word, keyStr) {
    keyStr = keyStr ? keyStr : "abcmilanqwe12345"; //判断是否存在key，不存在就用定义好的16位的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 = 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();
  },
};

三、在需要的地方引入AES.js文件

import AES from "@/utils/AES.js";

四、使用

要注意使用AES加密的时候加密和解密的key必须要是相同否则无法解密对应加密的内容

<script>
import AES from "@/common/AES.js";
export default {
  name: "HelloWorld",
  data() {
    return {
      encryptStr: 555,
      loginForm: {
        uname: "李四",
      },
      decryptStr: "",
    };
  },
  props: {
    msg: String,
  },
  mounted() {
    //栗子
    //第一步生成 随机生成指定数量的16进制key
    var key = AES.generatekey(16); //这个地方我当时demo的时候只要不是16就会显示报错
    //第二步 加密
    this.encryptStr = AES.encrypt(this.loginForm.uname, key);
    //第三步 解密
    this.decryptStr = AES.decrypt(this.encryptStr, key);
    //控制台打印
    console.log(this.encryptStr); //加密值
    console.log(this.decryptStr); //解密值
    // 如果是对象/数组的话，需要先JSON.stringify转换成字符串
    var encrypts = AES.encrypt(JSON.stringify(this.loginForm), key);
    var dess = JSON.parse(AES.decrypt(encrypts, key));
    console.log(encrypts); //加密值
    console.log(dess); //解密值
    /* 
     注意 第二步和第三步加解密的key值一定要是同一个否则解密将无法打印对应的加密内容 
    */
  },
};
</script>