Vue前端服务加密后端服务解密--AES算法实现
在实际项目中考虑到用户数据的安全性,在用户登录时,前端需要对用户密码加密(防止用户密码泄露),服务端收到登录请求时先对密码进行解密,然后再进行用户验证登操作。本文使用 AES ECB 模式算法来实现前端机密后端解密基本流程。
基本流程
- 用户在登录页输入用户信息,点击登录按钮时,前端需要对用户密码进行加密,再去请求登录接口,进行登录;
- 如果用户选择记住密码,注意cookie或localStorage中要保存加密后的密码,以防止密码泄露;
- 当用户再次回到登录页时(用户退出或令牌过期时),从cookie或localStorage中拿到加密密码要先解密然后初始化到密码框中;
- 服务端收到登录请求,先进行密码解密,然后再去验证用户的有效性;
- 或者先根据用户名去获取用户信息,然后对该用户密码加密,再去跟前端传的密码比对,以验证密码的有效性。
后端加密算法
pom.xml 引入
<dependency><groupId>org.bouncycastle</groupId><artifactId>bcprov-jdk15on</artifactId><version>1.56</version>
</dependency><!-- fastjson2 -->
<dependency><groupId>com.alibaba.fastjson2</groupId><artifactId>fastjson2</artifactId><version>2.0.51</version>
</dependency>
AES 工具类
package com.angel.ocean.util;import javax.crypto.Cipher;
import javax.crypto.spec.SecretKeySpec;
import com.alibaba.fastjson2.JSON;
import lombok.extern.slf4j.Slf4j;
import org.apache.tomcat.util.codec.binary.Base64;
import java.security.Security;
import java.util.Objects;@Slf4j
public class AESUtil {// AES 秘钥private static final String key = "5JKRGV0QO4WK1WCWVK55YEU0A1NPOXOP";private AESUtil() {}/*** AES 加密*/public static String encrypt(Object content) throws Exception {String data = "";if(null == content) {return null;}// 判断content是否为字符串if (content instanceof String) {data = content.toString();} else {data = JSON.toJSONString(content);}// 将加密过的byte[]数据转换成Base64编码字符串return base64ToString(aesECBEncrypt(data.getBytes(), key.getBytes()));}/*** AES解密*/public static Object decrypt(String content) {if(null == content) {return null;}try {byte[] base64 = stringToBase64(content);byte[] bytes = aesECBDecrypt(base64, key.getBytes());String result = new String(bytes);String data = result.replaceAll("\"", "");// 判断解密出来的数据是字符串还是jsonif (data.startsWith("{") && data.endsWith("}")) {return JSON.parse(data);} else {return data;}} catch (Exception e) {log.error("AESUtil.decrypt() error, {}", e.getMessage(), e);}return null;}private static byte[] aesECBEncrypt (byte[] content, byte[] keyBytes) {try {SecretKeySpec key = new SecretKeySpec(keyBytes, "AES");Security.addProvider(new org.bouncycastle.jce.provider.BouncyCastleProvider());Cipher cipher = Cipher.getInstance("AES/ECB/PKCS7Padding");cipher.init(Cipher.ENCRYPT_MODE, key);return cipher.doFinal(content);} catch (Exception e) {log.error("AESUtil.aesECBEncrypt() error, {}", e.getMessage(), e);}return null;}private static byte[] aesECBDecrypt(byte[] content, byte[] keyBytes) {try {SecretKeySpec key = new SecretKeySpec(keyBytes, "AES");Security.addProvider(new org.bouncycastle.jce.provider.BouncyCastleProvider());Cipher cipher = Cipher.getInstance("AES/ECB/PKCS7Padding");cipher.init(Cipher.DECRYPT_MODE, key);return cipher.doFinal(content);} catch (Exception e) {log.error("AESUtil.aesECBDecrypt() error, {}", e.getMessage(), e);}return null;}/*** 将字符串转换成Base64*/public static byte[] stringToBase64(String key) throws Exception {return Base64.decodeBase64(key.getBytes());}/*** 将Base64转换成字符串*/public static String base64ToString(byte[] key) throws Exception {return new Base64().encodeToString(key);}public static void main(String[] args) throws Exception {// 明文String data = "123456";// 加密String encryptData = encrypt(data);log.info("encryptData: {}", encryptData);// 解密String decryptData = Objects.requireNonNull(decrypt(encryptData)).toString();log.info("decryptData: {}", decryptData);}
}
main运行结果

Vue前端加密
安装crypto-js
npm install crypto-js
引入crypto-js
import CryptoJS from 'crypto-js'
AES 秘钥
const key = '5JKRGV0QO4WK1WCWVK55YEU0A1NPOXOP'
加密解密方法
methods: {encrypt (data) {var secretKey = CryptoJS.enc.Utf8.parse(key);var srcs = CryptoJS.enc.Utf8.parse(data);var encrypted = CryptoJS.AES.encrypt(srcs, secretKey, {mode:CryptoJS.mode.ECB,padding: CryptoJS.pad.Pkcs7});return encrypted.toString();},decrypt(data) {var secretKey = CryptoJS.enc.Utf8.parse(key);var decrypt = CryptoJS.AES.decrypt(data, secretKey, {mode:CryptoJS.mode.ECB,padding: CryptoJS.pad.Pkcs7});return CryptoJS.enc.Utf8.stringify(decrypt).toString();}
}
密码:123456,加密后的密码截图:

相关文章:
Vue前端服务加密后端服务解密--AES算法实现
在实际项目中考虑到用户数据的安全性,在用户登录时,前端需要对用户密码加密(防止用户密码泄露),服务端收到登录请求时先对密码进行解密,然后再进行用户验证登操作。本文使用 AES ECB 模式算法来实现前端机密…...
matlab实现文字识别
在MATLAB中实现文字识别通常涉及图像处理技术和机器学习算法,特别是使用MATLAB内置的Image Processing Toolbox和Machine Learning Toolbox。下面是一个基本的步骤指南,展示如何在MATLAB中设置和执行一个简单的OCR(Optical Character Recogni…...
Leetcode - 周赛409
目录 一,3242. 设计相邻元素求和服务 二,3243. 新增道路查询后的最短距离 I 三,3244. 新增道路查询后的最短距离 II 四,3245. 交替组 III 一,3242. 设计相邻元素求和服务 本题纯模拟,代码如下ÿ…...
突破百度网盘的下载限速,两种方法教会你【超详细】
一、前言 Hello,大家后,我是博主英杰,前几天,我在使用百度网盘过程中,下载速度极慢,自己作为一个白嫖党,开会员也是心疼那点钱,所以在网上找了几个有效解决百度网盘限速问题的教程&a…...
整理 酷炫 Flutter 优质 布局、交互 开源App
xtimer-flutter-app Flutter 计时器应用 项目地址:https://github.com/pedromassango/xtimer-flutter-app 项目Demo:https://download.csdn.net/download/qq_36040764/89631382...
【PyCharm怎么同时打开多个项目】
问题描述: 之前点击了“dont ask again”,再也不能同时打开两个或多个项目了。 解决: file->settings->appearance->system settings->project->选择ask...
使用 ProcDump 调试 Linux
Debug Linux using ProcDump By Gaurav Kamathe July 17, 2020 译者:wxy 校对:wxy 微软越来越心仪 Linux 和开源,这并不是什么秘密。在过去几年中,该公司稳步地增加了对开源的贡献,包括将其部分软件和工具移植到 L…...
2023年中国城市统计年鉴(PDF+excel)
2023年中国城市统计年鉴 1、时间:1985-2023年 2、格式:PDFexcel 3、说明:中国城市统计年鉴收录了全国各级城市社会经济发展等方面的主要统计数据,数据来源于各城市的相关部门。本年鉴内容共分四个部分:第一部分是全…...
自用 K8S 资源对象清单 YAML 配置模板手册-1
Linux 常用资源对象清单配置速查手册-1 文章目录 1、Pod 容器集合2、Pod 的存储卷3、Pod 的容器探针4、ResourceQuota 全局资源配额管理5、PriorityClass 优先级类 管理多个资源对象清单文件常用方法: 使用 sed 流式编辑器批量修改脚本键值进行资源清单的创建&am…...
【数据库】事务 | 视图 | 自定义函数创建
1、事物及其特征 事物机制的应用:淘宝订单交易,微信转账等。 视图--------筛子---------过滤-------筛选想要的信息 数据库只存放了视图对应的SQL语句。 视图是一个虚拟的表,本质是一个虚拟的SQL命令集合。 (1)创建…...
Linux---进程(5)---进程地址空间
目录 预备知识 进程地址空间 什么是进程地址空间 为什么要存在进程地址空间和页表 缺页中断 预备知识 我们在学习语言的时候,一般都会了解到内存区域划分,下面了解一下Linux的内存区域划分。 通过上图,我们了解到 1、堆区向上增长&…...
C语言实现数据结构之队列
目录 队列一. 队列的概念及结构二. 队列的实现1. 要实现的功能2 具体的实现2.1 结构体2.2 初始化2.3 入队列2.4 出队列2.5 返回队首元素2.6 返回队尾元素2.7 队列元素个数2.8 队列判空2.9 队列销毁 三. 队列相关OJ题设计循环队列用队列实现栈用栈实现队列 四. 概念选择题五. 参…...
写一个Vue2和vue3的自定义指令(以复制指定作为示例)
文章目录 一、自定义指令是什么?二、自定义指令有啥用?三、自定义指令怎么用?1.自定义指令的参数2.自定义指令的钩子函数(1)五个钩子函数的说明(2)钩子函数的参数(主要参数:el和valu…...
MySQL —— 聚合查询,分组查询 与 联合查询
聚合函数 常见的统计总数、计算平局值等操作,可以使用聚合函数来实现,常见的聚合函数有: 函数说明count()统计数据总数sum()求和avg()求平均值max()求最大值min()求最小值 注意凡是涉及运算的,数据库会自动掉 NULL 值 注意NULL …...
Spring声明式事务失效场景
Spring声明式事务失效场景 背景搭建测试环境测试事务失效场景Transactional 注解标注在 private 方法上异常被 catch 了,事务失效方法抛出的是受检异常,事务也会失效事务传播行为配置不合理导致事务失效 背景 Spring 针对 Java Transaction API (JTA)、…...
基于SpringBoot+UniAPP宠物食品外卖点单小程序的设计与实现》
✅博主简介:Java 全栈开发工程师,抖音优质技术创作者,日常分享实用的前端、后端、运维开发技术。 ✅技术栈:Java、SpringBoot、Vue、React、Node.js、Nest.js、Nuxt.js、uni-app ✅技术擅长:计算机毕设选题、开题报告、…...
ssrf 内网访问 伪协议 读取文件 端口扫描
SSRF(Server-Side Request Forgery,服务器侧请求伪造)是一种利用服务器发起网络请求的能力来攻击内网资源或执行其他恶意活动的技术。SSRF可以用于访问通常不可由外部直接访问的内网资源,读取文件,甚至进行端口扫描。以…...
发布包到npm
目录 注册npm账号 创建包 登录npm 上架包 更新包 删除包 注册npm账号 首先注册npm账号:npm | Sign Up (npmjs.com) 创建包 可以在桌面上新建一个文件夹:文件夹名随便起,但是别跟npm已经上架的包名重复了 可以通过下面的指令查看&…...
Python | Leetcode Python题解之第324题摆动排序II
题目: 题解: def quickSelect(a: List[int], k: int) -> int:seed(datetime.datetime.now())shuffle(a)l, r 0, len(a) - 1while l < r:pivot a[l]i, j l, r 1while True:i 1while i < r and a[i] < pivot:i 1j - 1while j > l an…...
IGModel——提高基于 GNN与Attention 机制的方法在药物发现中的实用性
导言 深度学习在药物发现(发现治疗药物)领域的应用以及传统方法面临的挑战。 药物(尤其是我们将在本文中讨论的被称为抑制剂的药物)通过与在人体中发挥不良功能的蛋白质结合并改变这些蛋白质的功能来发挥治疗效果。因此…...
系统设计 --- MongoDB亿级数据查询优化策略
系统设计 --- MongoDB亿级数据查询分表策略 背景Solution --- 分表 背景 使用audit log实现Audi Trail功能 Audit Trail范围: 六个月数据量: 每秒5-7条audi log,共计7千万 – 1亿条数据需要实现全文检索按照时间倒序因为license问题,不能使用ELK只能使用…...
江苏艾立泰跨国资源接力:废料变黄金的绿色供应链革命
在华东塑料包装行业面临限塑令深度调整的背景下,江苏艾立泰以一场跨国资源接力的创新实践,重新定义了绿色供应链的边界。 跨国回收网络:废料变黄金的全球棋局 艾立泰在欧洲、东南亚建立再生塑料回收点,将海外废弃包装箱通过标准…...
linux 错误码总结
1,错误码的概念与作用 在Linux系统中,错误码是系统调用或库函数在执行失败时返回的特定数值,用于指示具体的错误类型。这些错误码通过全局变量errno来存储和传递,errno由操作系统维护,保存最近一次发生的错误信息。值得注意的是,errno的值在每次系统调用或函数调用失败时…...
Psychopy音频的使用
Psychopy音频的使用 本文主要解决以下问题: 指定音频引擎与设备;播放音频文件 本文所使用的环境: Python3.10 numpy2.2.6 psychopy2025.1.1 psychtoolbox3.0.19.14 一、音频配置 Psychopy文档链接为Sound - for audio playback — Psy…...
图表类系列各种样式PPT模版分享
图标图表系列PPT模版,柱状图PPT模版,线状图PPT模版,折线图PPT模版,饼状图PPT模版,雷达图PPT模版,树状图PPT模版 图表类系列各种样式PPT模版分享:图表系列PPT模板https://pan.quark.cn/s/20d40aa…...
学习STC51单片机32(芯片为STC89C52RCRC)OLED显示屏2
每日一言 今天的每一份坚持,都是在为未来积攒底气。 案例:OLED显示一个A 这边观察到一个点,怎么雪花了就是都是乱七八糟的占满了屏幕。。 解释 : 如果代码里信号切换太快(比如 SDA 刚变,SCL 立刻变&#…...
Springboot社区养老保险系统小程序
一、前言 随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱,社区养老保险系统小程序被用户普遍使用,为方…...
Hive 存储格式深度解析:从 TextFile 到 ORC,如何选对数据存储方案?
在大数据处理领域,Hive 作为 Hadoop 生态中重要的数据仓库工具,其存储格式的选择直接影响数据存储成本、查询效率和计算资源消耗。面对 TextFile、SequenceFile、Parquet、RCFile、ORC 等多种存储格式,很多开发者常常陷入选择困境。本文将从底…...
【Nginx】使用 Nginx+Lua 实现基于 IP 的访问频率限制
使用 NginxLua 实现基于 IP 的访问频率限制 在高并发场景下,限制某个 IP 的访问频率是非常重要的,可以有效防止恶意攻击或错误配置导致的服务宕机。以下是一个详细的实现方案,使用 Nginx 和 Lua 脚本结合 Redis 来实现基于 IP 的访问频率限制…...
DBLP数据库是什么?
DBLP(Digital Bibliography & Library Project)Computer Science Bibliography是全球著名的计算机科学出版物的开放书目数据库。DBLP所收录的期刊和会议论文质量较高,数据库文献更新速度很快,很好地反映了国际计算机科学学术研…...
