vue项目中使用AES实现密码加密解密（ECB和CBC两种模式）

下面我就为你讲解在vue项目中使用AES实现密码加密解密的完整攻略。

简介

AES是一种对称加密算法，加密解密使用相同的密钥。在前后端交互中，经常需要对数据进行加密，以保证数据传输的安全性。本文将介绍如何在vue项目中使用AES实现密码加密解密。

安装依赖

在vue项目中使用AES需要安装crypto-js这个库，可以通过npm安装：

npm install crypto-js --save

加密解密

ECB模式

ECB模式是最基本的分组加密模式，将明文分成固定长度的组，然后对每一组进行加密。

import CryptoJS from 'crypto-js'

/**
 * ECB模式加密
 * @param {string} data 待加密的数据
 * @param {string} key 密钥
 * @returns {string} 加密后的数据
 */
export function encryptionECB(data, key) {
  const keyHex = CryptoJS.enc.Utf8.parse(key)
  const srcs = CryptoJS.enc.Utf8.parse(data)
  const encrypted = CryptoJS.AES.encrypt(srcs, keyHex, {
    mode: CryptoJS.mode.ECB,
    padding: CryptoJS.pad.Pkcs7
  })
  return encrypted.toString()
}

/**
 * ECB模式解密
 * @param {string} data 待解密的数据
 * @param {string} key 密钥
 * @returns {string} 解密后的数据
 */
export function decryptionECB(data, key) {
  const keyHex = CryptoJS.enc.Utf8.parse(key)
  const decrypt = CryptoJS.AES.decrypt(data, keyHex, {
    mode: CryptoJS.mode.ECB,
    padding: CryptoJS.pad.Pkcs7
  })
  return decrypt.toString(CryptoJS.enc.Utf8)
}

CBC模式

CBC模式需要一个初始化向量，在加密时使用前一个密文块与当前明文块进行异或操作。CBC模式的安全性比ECB模式更高。

import CryptoJS from 'crypto-js'

/**
 * CBC模式加密
 * @param {string} data 待加密的数据
 * @param {string} key 密钥
 * @param {string} iv 初始化向量
 * @returns {string} 加密后的数据
 */
export function encryptionCBC(data, key, iv) {
  const keyHex = CryptoJS.enc.Utf8.parse(key)
  const ivHex = CryptoJS.enc.Utf8.parse(iv)
  const srcs = CryptoJS.enc.Utf8.parse(data)
  const encrypted = CryptoJS.AES.encrypt(srcs, keyHex, {
    iv: ivHex,
    mode: CryptoJS.mode.CBC,
    padding: CryptoJS.pad.Pkcs7
  })
  return encrypted.toString()
}

/**
 * CBC模式解密
 * @param {string} data 待解密的数据
 * @param {string} key 密钥
 * @param {string} iv 初始化向量
 * @returns {string} 解密后的数据
 */
export function decryptionCBC(data, key, iv) {
  const keyHex = CryptoJS.enc.Utf8.parse(key)
  const ivHex = CryptoJS.enc.Utf8.parse(iv)
  const decrypt = CryptoJS.AES.decrypt(data, keyHex, {
    iv: ivHex,
    mode: CryptoJS.mode.CBC,
    padding: CryptoJS.pad.Pkcs7
  })
  return decrypt.toString(CryptoJS.enc.Utf8)
}

示例

以下是一个使用ECB模式加密解密的示例：

import { encryptionECB, decryptionECB } from '@/utils/aes'

const key = 'abcdef0123456789' // 密钥

const plainText = 'Hello, world!' // 明文

// 加密
const cipherText = encryptionECB(plainText, key)
console.log('密文:', cipherText)

// 解密
const decryptedText = decryptionECB(cipherText, key)
console.log('解密后的明文:', decryptedText)

以下是一个使用CBC模式加密解密的示例：

import { encryptionCBC, decryptionCBC } from '@/utils/aes'

const key = 'abcdef0123456789' // 密钥
const iv = '1234567890abcdef' // 初始化向量

const plainText = 'Hello, world!' // 明文

// 加密
const cipherText = encryptionCBC(plainText, key, iv)
console.log('密文:', cipherText)

// 解密
const decryptedText = decryptionCBC(cipherText, key, iv)
console.log('解密后的明文:', decryptedText)

以上就是在vue项目中使用AES实现密码加密解密(ECB和CBC两种模式)的完整攻略，希望对你有帮助。