前端对称加密

cnpm install crypto-js --save
建utils文件夹：
secret.js

const CryptoJS = require('crypto-js');  //引用AES源码js

const key = CryptoJS.enc.Utf8.parse("1234123412ABCDEF");  //十六位十六进制数作为密钥
const iv = CryptoJS.enc.Utf8.parse('ABCDEF1234123412');   //十六位十六进制数作为密钥偏移量

//解密方法
function Decrypt(word) {
  let encryptedHexStr = CryptoJS.enc.Hex.parse(word);
  let srcs = CryptoJS.enc.Base64.stringify(encryptedHexStr);
  let decrypt = CryptoJS.AES.decrypt(srcs, key, { iv: iv, mode: CryptoJS.mode.CBC, padding: CryptoJS.pad.Pkcs7 });
  let decryptedStr = decrypt.toString(CryptoJS.enc.Utf8);
  return decryptedStr.toString();
}

//加密方法
function Encrypt(word) {
  let srcs = CryptoJS.enc.Utf8.parse(word);
  let encrypted = CryptoJS.AES.encrypt(srcs, key, { iv: iv, mode: CryptoJS.mode.CBC, padding: CryptoJS.pad.Pkcs7 });
  return encrypted.ciphertext.toString().toUpperCase();
}

export default {
  Decrypt,
  Encrypt
}

上面的代码中的 key 是密钥 ，iv 是密钥偏移量，这个一般是接口返回的，为了方便，我们这里就直接在这里定义了。

值得注意的是密钥的长度，由于对称解密使用的算法是 AES-128-CBC算法，数据采用 PKCS#7 填充 ， 因此这里的 key 需要为16位！

接着我们定义了 解密方法Decrypt 和 加密方法 Encrypt ，最后通过 export default 将其暴露出去，方便在需要的时候进行引入~

ok，核心代码就这么多，是不是很简单啊，其实也么有你想的那么复杂哈，剩下的就是展示一下如何使用咯~

home.vue

<!--  -->
<template>
  <div class="wrapper">
    <!--加密-->
    <div class="example-box">
      <div class="title">加密示例</div>
      <p class="msg">明文：{{ msg }}</p>
      <button class="encrypt-btn" @click="encrypt">加密</button>
      <p class="msg">{{ encryptMsg }}</p>
    </div>
    <!--解密-->
    <div class="example-box">
      <div class="title">解密示例</div>
      <p class="msg">密文：{{ userInfo }}</p>
      <button class="encrypt-btn" @click="decrypt">解密</button>
      <p class="msg">{{ decryptMsg }}</p>
    </div>
  </div>
</template>

<script>
import secret from "../utils/secret";
// import userInfo from "../utils/mock";
import { Decrypt, Encrypt } from "../utils/secret";
export default {
  data() {
    return {
      msg: "This is a clear text",
      encryptMsg: "",
      userInfo: "",
      decryptMsg: ""
    };
  },

  methods: {
    encrypt() {
      this.encryptMsg = "密文：" + secret.Encrypt(this.msg);
      this.userInfo = secret.Encrypt(this.msg);
    },
    decrypt() {
      this.decryptMsg = "明文：" + secret.Decrypt(this.userInfo);
    }
  }
};
</script>
<style lang='scss' scoped>
</style>