当前位置：首页 > news >正文

vue 项目中添加DES加密

news 2026/2/9 17:06:17

vue 项目中添加DES加密

由于现在项目使用http协议，且登录界面是明文传输，项目真正上线后基本的密码传输都很不安全。

决定用前端框架加密后再进行传输，以提高密码传输过程中的安全性。
crypto-js 是一个流行的 JavaScript 加密库，它提供了多种加密算法和功能。以下是一些 crypto-js 提供的常见加密方法：

常见的加密方法(简单看一下有点印象,下边着重介绍des加密)

1.AES (Advanced Encryption Standard): 对称加密算法，支持多种模式（如 CBC, CTR, GCM 等）和填充方案。

CryptoJS.AES.encrypt(message, password, [options])
CryptoJS.AES.decrypt(ciphertext, password, [options])

2.DES (Data Encryption Standard): 对称加密算法，较老的标准。

CryptoJS.DES.encrypt(message, password, [options])
CryptoJS.DES.decrypt(ciphertext, password, [options])

3.Triple DES (3DES or DES-EDE3): 是 DES 的一个增强版本，使用三个不同的密钥。

CryptoJS.TripleDES.encrypt(message, password, [options])
CryptoJS.TripleDES.decrypt(ciphertext, password, [options])

4.Rabbit: 一个流密码，适用于加密大量数据。

CryptoJS.Rabbit.encrypt(message, password, [options])
CryptoJS.Rabbit.decrypt(ciphertext, password, [options])

5.RC4: 一个流密码，速度很快，但存在一些已知的弱点。

CryptoJS.RC4.encrypt(message, password, [options])
CryptoJS.RC4.decrypt(ciphertext, password, [options])

6.SHA1, SHA256, SHA512: 散列函数，用于生成数据的哈希值。

CryptoJS.SHA1(message)
CryptoJS.SHA256(message)
CryptoJS.SHA512(message)

7.HMAC (Hash-based Message Authentication Code): 基于散列函数的消息认证码，用于验证消息的完整性和来源。

CryptoJS.HmacSHA1(message, key)
CryptoJS.HmacSHA256(message, key)
CryptoJS.HmacSHA512(message, key)

8.PBKDF2 (Password-Based Key Derivation Function 2): 从密码中派生密钥的函数。

CryptoJS.PBKDF2(password, salt, iterations, keySize, hasher)

9.PRNG (Pseudo-Random Number Generator): 生成伪随机数。

CryptoJS.lib.WordArray.random(nBytes)

10.Base64: 编码和解码方法，用于将二进制数据转换为可打印的 ASCII 字符串。

CryptoJS.enc.Base64.stringify(wordArray)
CryptoJS.enc.Base64.parse(base64String)
这只是 crypto-js 提供的功能的一部分。为了获得完整的列表和详细的使用方法，建议查阅 crypto-js 的官方文档或源代码。

这里详细介绍一种加密方式des加密,其他加密类似操作

1.安装插件

安装
npm install crypto-js//引入
import CryptoJS from 'crypto-js';

或者下载依赖中crypto-js.js复制到本地,在引入到使用的文件中

var CryptoJS = require('./crypto-js.js')

2.封装加解密方法

var CryptoJS = require('./crypto-js.js')const key = ''    //秘钥
const keyHex = CryptoJS.enc.Utf8.parse(key)// 加密
const encryptDES = (message) => {if (message) {var encrypt = CryptoJS.DES.encrypt(message, keyHex, {// 配置选项mode: CryptoJS.mode.ECB, // 加密模式，ECB 是最简单的模式，但通常不推荐用于安全应用padding: CryptoJS.pad.Pkcs7 // 填充方案，用于确保数据长度适合加密})// return encrypt.toString();              //输出的是base64格式密文return encrypt.ciphertext.toString() //  加密出来为 hex格式密文// 注意点:	前后端加密的mode,padding和输出值需要保持一致,上边我写了两种格式的输出对应好应该就没啥问题了.} else {return ''}
}// 解密
const decryptDES = (ciphertext) => {if (ciphertext) {const decrypted = CryptoJS.DES.decrypt({ciphertext: CryptoJS.enc.Hex.parse(ciphertext)}, keyHex, {mode: CryptoJS.mode.ECB,padding: CryptoJS.pad.Pkcs7})return decrypted.toString(CryptoJS.enc.Utf8)} else {return ''}
}export {encryptDES,decryptDES
}

在上面的配置中：

message 是要加密的明文消息。

keyHex 是用于加密和解密的密钥。

对于 DES，它应该是 8 字节长（64 位）。在真实场景中，密钥通常通过更安全的机制生成和存储。

mode 是加密模式，

这里使用的是 CryptoJS.mode.ECB（电子密码本模式）。尽管 ECB 模式简单，但它通常被认为是不安全的，因为它不提供任何形式的块链接。更安全的模式包括 CBC（密码块链接模式）和 CFB（密码反馈模式）等。

padding 是填充方案，

用于确保数据长度适合加密。CryptoJS.pad.Pkcs7 是一种常用的填充方法。

请注意，DES 加密由于其较短的密钥长度（56 位）和已知的弱点，现在被认为是不安全的，并且在许多现代应用中都已被更安全的加密算法（如 AES）所取代。如果你正在开发一个新的应用或系统，建议使用更现代、更安全的加密算法。

3.使用

使用很简单引入后直接调用就可以

import { encryptDES,decryptDES } from '@/utils/jiami/cryptoDes'
const ciphertext= encryptDES(message)   //加密
const message= decryptDES(ciphertext)   //解密