Vue中使用AES加密

最新推荐文章于 2025-06-16 15:30:01 发布

原创最新推荐文章于 2025-06-16 15:30:01 发布 · 1.7k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#VUE #AES

Vue笔记同时被 2 个专栏收录

15 篇文章

订阅专栏

AES加密

1 篇文章

订阅专栏

本文详细介绍了一个后台管理系统项目中，如何使用crypto-js库实现用户登录密码的AES/ECB/PKCS7Padding加密过程。从安装crypto-js库开始，到创建加密函数，并在Vue组件中调用，提供了一套完整的解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

后台管理系统项目中遇到需要对用户登录密码进行AES/ECB/PKCS7Padding加密，然后调用登录接口，传入密码，用户名。
在此记录一下我的实现过程。
第一步：安装crypto-js

项目中执行 " npm install crypto-js --save-dev " ,安装crypto-js。

第二步：项目中新建一个js文件，比如：utils.js （utils：工具集）
在这里插入图片描述
第三步：utils.js文件中的内容:

import CryptoJS from ‘crypto-js’

utils.js内容：

// 默认的 KEY
const KEY = CryptoJS.enc.Utf8.parse(‘r0NSnXLgGD2Gg1X4’)
/**
* AES加密：字符串 key
*/
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 encrypted;
}

第四步：在需要使用加密方法的vue组件中使用import引入utils.js文件即可使用了

import {Encrypt} from ‘…/assets/js/utils.js’

使用：
Encrypt(passWd)；