使用CryptoJS实现Vue前端加密,Java后台解密的步骤和方法

最新推荐文章于 2025-10-24 10:00:00 发布

原创

最新推荐文章于 2025-10-24 10:00:00 发布 · 7.5k 阅读

16 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #CryptoJS

本文介绍了如何在Vue前端使用CryptoJS库实现AES对称加密和CBC模式，以及在SpringSecurity项目中如何配合后端Java解密工具类处理登录密码加密。着重展示了前后端加密解密操作的实践和PasswordEncoder接口的定制实现。

1、crypto.js简介

CryptoJS 是一个 JavaScript 库，提供了一系列密码学函数和工具，用于加密、解密、生成摘要等任务。它支持多种加密算法，包括常见的对称加密算法（如 AES、DES）和非对称加密算法（如 RSA）。
同时，CryptoJS还包括了ECB和CBC两种模式，其中ECB模式：全称Electronic Codebook（电码本），在ECB模式中，每个明文分组都被单独加密，且每个明文分组都被加密为相同的密文分组。也就是说，如果两个明文分组相同，那么它们的密文分组也相同。CBC模式：全称Cipher Block Chaining（密文分组链接模式），在CBC模式中，每个明文分组都与前一个密文分组进行XOR运算（相异为一）然后再进行加密。因此，密文分组是相互连接的，如果两个明文分组相同，那么它们的密文分组也会不同。
这里，我们使用了AES对称加密算法，并使用了CBC模式实现登录密码的加密，实现步骤如下：

2、Vue前端步骤

2.1、安装CryptoJS

npm install crypto-js

2.2、引入CryptoJS

import CryptoJS from 'crypto-js';

2.3、加密方法

//设置秘钥和秘钥偏移量
const SECRET_KEY = CryptoJS.enc.Utf8.parse("1234567890123456");
const SECRET_IV = CryptoJS.enc.Utf8.parse("1234567890123456");
/**
 * 加密方法
 * @param word
 * @returns {string}
 */
function encrypt(word) {
   
   
  let srcs = CryptoJS.enc.Utf8.parse(word);
  let encrypted = CryptoJS.AES.encrypt(srcs, SECRET_KEY, {
   
   
      iv: SECRET_IV ,
      mode: CryptoJS.mode.CBC,
      padding: CryptoJS.pad.ZeroPadding
  })
  return CryptoJS.enc.Base64.stringify(encrypted.ciphertext);
}

2.4、解密方法

该方法，在前端一般是不需要的，前端只需要使用加密方法进行加密即可。

function decrypt(word) {
   
   
  let base64  = CryptoJS.enc.Base64.parse(word);
  let srcs = CryptoJS.enc.Base64.stringify(base64);
  const decrypt

最低0.47元/天解锁文章