Vue使用crypto-js加密库对称加密算法

实际项目中，为了安全性考虑，登陆时会对账号密码进行加密传输，一般会通过MD5、AES进行加密，本文介绍crypto-js中的AES对称加密算法

npm官网：https://www.npmjs.com/package/crypto-js 

1. 安装  

npm install crypto-js

2. 按需引入 

import CryptoJS from "crypto-js";

3. 加密、解密方法封装 

在utils下新建crypto.js文件 

第一种 

import CryptoJS from "crypto-js";

const key = CryptoJS.enc.Utf8.parse("1234123412ABCDEF");  //十六位十六进制数作为密钥
const iv = CryptoJS.enc.Utf8.parse('ABCDEF1234123412');   //十六位十六进制数作为密钥偏移量
 
//解密方法
export function decryption(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();
}
 
//加密方法
export function encryption(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();
}

第二种： 

import CryptoJS from "crypto-js";

// 加密
export function encryption(pwd, key, iv) {
  pwd = CryptoJS.enc.Utf8.parse(pwd) // 解析明文
  key = CryptoJS.enc.Utf8.parse(key) // 解析密钥
  iv = CryptoJS.enc.Utf8.parse(iv)
  const encrypted = CryptoJS.AES.encrypt(pwd, key, {
    mode: CryptoJS.mode.CBC, // 加密模式
    padding: CryptoJS.pad.Pkcs7, // 填充方式
    iv // 向量
  })
  return encrypted.toString() // 加密后的结果是对象，要转为文本

  // 加上ciphertext 就变成十六进制的了
  // return encrypted.ciphertext.toString()
}

// 解密
export function decrypt(data, key, iv) {
  // // 如果加密时候用了ciphertext.toString() 就得加上下面这两行
  // data = CryptoJS.enc.Hex.parse(data)
  // data = CryptoJS.enc.Base64.stringify(data)
  key = CryptoJS.enc.Utf8.parse(key) // 解析密钥
  iv = CryptoJS.enc.Utf8.parse(iv)
  const encrypted = CryptoJS.AES.decrypt(data, key, {  // 解析的密文必须是base64编码（data） 这很关键！
    mode: CryptoJS.mode.CBC, // 加密模式
    padding: CryptoJS.pad.Pkcs7, // 填充方式
    iv // 向量
  })
  return encrypted.toString(CryptoJS.enc.Utf8) // 加密后的结果是对象，要转为文本
}

4. 使用 、测试

上面两种，测试一下试试 

<script>
import { encryption, decrypt } from '@/utils/crypto'
export default {
  mounted(){
    let pwd = '17171711717'
    let key = 'abcdef0123456789'
    let iv = 'abcdef0123456789'
    console.log(encryption(pwd, key, iv), '加密----->>>') // 加密
    console.log(decrypt(encryption(pwd, key, iv), key, iv), '解密----->>>') // 解密
  },
}
</script>

控制台输出： 

5. 补充： 

5.1. parse and stringfiy 

// parse
var wordArray = CryptoJS.enc.Utf8.parse(utf8String)
var wordArray = CryptoJS.enc.Latin1.parse(latin1String)
var wordArray = CryptoJS.enc.Hex.parse(hexString)
var wordArray = CryptoJS.enc.Base64.parse(base64String)
// stringfiy
var utf8String = CryptoJS.enc.Utf8.stringify(utf8Array)
var latin1String = CryptoJS.enc.Latin1.stringify(Latin1Array)
var hexString = CryptoJS.enc.Hex.stringify(HexArray)
var base64String = CryptoJS.enc.Base64.stringify(Base64Array)

5.2. 消息摘要算法 

var hash = CryptoJS.MD5(message)
var hash = CryptoJS.MD5(wordArray)
var hmac = CryptoJS.HmacMD5(message, key)

var hash = CryptoJS.SHA1(message)
var hash = CryptoJS.SHA1(wordArray)
var hmac = CryptoJS.HmacSHA1(message, key)

var hash = CryptoJS.SHA224(message)
var hash = CryptoJS.SHA224(wordArray)
var hmac = CryptoJS.HmacSHA224(message, key)

var hash = CryptoJS.SHA256(message)
var hash = CryptoJS.SHA256(wordArray)
var hmac = CryptoJS.HmacSHA256(message, key)

var hash = CryptoJS.SHA3(message)
var hash = CryptoJS.SHA3(wordArray)
var hmac = CryptoJS.HmacSHA3(message, key)

var hash = CryptoJS.SHA384(message)
var hash = CryptoJS.SHA384(wordArray)
var hmac = CryptoJS.HmacSHA384(message, key)

var hash = CryptoJS.SHA512(message)
var hash = CryptoJS.SHA512(wordArray)
var hmac = CryptoJS.HmacSHA512(message, key)

5.3. 对称加密算法 

var ciphertext = CryptoJS.AES.encrypt(message, key, config)
var plaintext = CryptoJS.AES.decrypt(ciphertext, key, config)

var ciphertext = CryptoJS.DES.encrypt(message, key, config)
var plaintext = CryptoJS.DES.decrypt(ciphertext, key, config)

var ciphertext = CryptoJS.TripleDES.encrypt(message, key, config)
var plaintext = CryptoJS.TripleDES.decrypt(ciphertext, key, config)

var ciphertext = CryptoJS.RC4.encrypt(message, key, config)
var plaintext = CryptoJS.RC4.decrypt(ciphertext, key, config)

5.4. 加密模式 

mode: // CBC ECB CFB OFB CTRGladman(CTR)

5.5. 填充方式 

padding: // NoPadding ZeroPadding Pkcs7(Pkcs5) Iso10126 Iso97971 AnsiX923