前言

因在项目中需要针对重要数据进行加解密传输处理，尤其在与后台交互的同时也需要进行加解密处理（需要后端开发者配合完成），为此讲解下AES前端加密解密的使用方法和流程。

加解密的两种模式区别
ECB：是一种基础的加密方式，密文被分割成分组长度相等的块（不足补齐），然后单独一个个加密，一个个输出组成密文。
CBC：是一种循环模式，前一个分组的密文和当前分组的明文异或或操作后再加密，这样做的目的是增强破解难度。（不容易主动攻击，安全性好于ECB，是SSL、IPSec的标准）

第一步

安装crypto-js

1
npm install crypto-js

第二步

在src目录下新建个放公用js文件夹(common)或者项目对应的公共文件夹，再建一个cryptojs文件夹，例如

第三步

在cryptojs文件夹下面的index.js中填写如下代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
import CryptoJS from 'crypto-js'

// 默认的 KEY 与 iv 如果没有给
const KEY = CryptoJS.enc.Utf8.parse('fb256a9a1fad11ea')
/**
 * AES加密 ：字符串 key iv  返回base64
 */
export function Encrypt (word, keyStr) {
  let key = KEY

  if (keyStr) {
    key = CryptoJS.enc.Utf8.parse(keyStr)
  }

  let srcs = CryptoJS.enc.Utf8.parse(word)
  let encrypted = CryptoJS.AES.encrypt(srcs, key, {
    mode: CryptoJS.mode.ECB,
    padding: CryptoJS.pad.Pkcs7
  })
  return CryptoJS.enc.Base64.stringify(encrypted.ciphertext)
}
/**
 * AES 解密 ：字符串 key iv  返回base64
 *
 */
export function Decrypt (word, keyStr) {
  let key = KEY

  if (keyStr) {
    key = CryptoJS.enc.Utf8.parse(keyStr)
  }

  let base64 = CryptoJS.enc.Base64.parse(word)
  let src = CryptoJS.enc.Base64.stringify(base64)

  let decrypt = CryptoJS.AES.decrypt(src, key, {
    mode: CryptoJS.mode.ECB,
    padding: CryptoJS.pad.Pkcs7
  })

  let decryptedStr = decrypt.toString(CryptoJS.enc.Utf8)
  return decryptedStr.toString()
}

第四步

在需要的地方引入

1
import { Encrypt, Decrypt } from '@/common/js/cryptojs'

第五步

在代码中进行调用

1
2
3
4
5
// 加密 打印：OyQihkYOA2QN2UBFqxDtyA==
console.log('Encrypt:', Encrypt('admincbs'))

// 解密 打印：admincbs
console.log('Decrypt:', Decrypt('OyQihkYOA2QN2UBFqxDtyA=='))