关于java和vue前端使用AES或者RSA加密后通过拦截器自动解密的实现+ RSA加密AES秘钥，AES加密data数据

最新推荐文章于 2023-09-03 23:24:49 发布
最新推荐文章于 2023-09-03 23:24:49 发布
阅读量1.4k 收藏 6
点赞数 2
文章标签： vue.js java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_25995697/article/details/118028562
版权

前端页面：

axios.post("/login2", {
  //在data中写入数据
  username: "admin",
  password: 111111,
}).then(res => {}

自定义拦截器axios

//全局拦截
import axios from "axios";
import Element from 'element-ui'

import store from './store'
import router from './router'
import {JSEncrypt} from "jsencrypt";
import AESECB from "@/common/AESECB";

//提取前缀
axios.defaults.baseURL = "http://localhost:8081"

//前置拦截
axios.interceptors.request.use(config => {
    //设置请求的类型
    config.headers["Content-Type"] = "application/json"

    //加密data数据
    config.data = AESECB.Encrypt(JSON.stringify(config.data));

    return config
})

//后置拦截
axios.interceptors.response.use(response => {
    let res = response.data;
    console.log("=====================")
    console.log("我是后置拦截", res)
    console.log("=====================")

    //判断状态码
    if (res.code === 200) {
        return response
    } else {
        //提示信息
        Element.Message.error(response.data.msg, {duration: 3 * 1000});

        //不会进入后面逻辑
        return Promise.reject(response.data.msg)
    }
}, error => {
    //错误信息
    console.log(error)
    //判断返回数据中data是否有值
    if (error.response.data) {
        error.message = error.response.data.msg
    }
    //如果返回是401跳转到登录页面
    if (error.response.data.status === 401) {
        store.commit("REMOVE_INFO")
        router.push("/login3")
    }
    //提示
    Element.Message.error(error.message, {duration: 3 * 1000});

    //组织返回
    return Promise.reject(error)

})

后端写入java拦截器 2个类

import org.springframework.stereotype.Component;

import javax.servlet.*;
import javax.servlet.http.HttpServletRequest;
import java.io.IOException;

@Component
public class AESFilter implements Filter {

    @Override
    public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain) throws IOException, ServletException {
        HttpServletRequest hsr = (HttpServletRequest) request;

        AESRequestWrapper aes_request = new AESRequestWrapper(hsr);
        aes_request.setAttribute("body", aes_request.body());

        chain.doFilter(aes_request, response);
    }
}

import org.apache.commons.io.IOUtils;

import javax.servlet.ReadListener;
import javax.servlet.ServletInputStream;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletRequestWrapper;
import java.io.ByteArrayInputStream;
import java.io.IOException;

public class AESRequestWrapper extends HttpServletRequestWrapper {

    private String body;

    public AESRequestWrapper(HttpServletRequest request) {
        super(request);
    }

    @Override
    public ServletInputStream getInputStream() throws IOException {
        return new SIS(new ByteArrayInputStream(body.getBytes()));
    }

    public String body() throws IOException {
        try {
            //从body中获取data的加密后的值进行解密--这里需要AES或者RSA工具类
            body = AES.aesDecrypt(IOUtils.toString(super.getInputStream()), AES.KEY);
        } catch (Exception e) {
            e.printStackTrace();
        }
//        body = AESUtil.decrypt(IOUtils.toString(super.getInputStream()));
//        body= RSA.decryptByPrivate(IOUtils.toString(super.getInputStream()), Const.privateKey);
        return body;
    }

    class SIS extends ServletInputStream {

        private ByteArrayInputStream bais;

        public SIS(ByteArrayInputStream bais) {
            this.bais = bais;
        }

        @Override
        public boolean isFinished() {
            return true;
        }

        @Override
        public boolean isReady() {
            return true;
        }

        @Override
        public void setReadListener(ReadListener read_listener) {

        }

        @Override
        public int read() throws IOException {
            return bais.read();
        }
    }
}

这样就实现了自动解密

RSA+AES整合一起用

自定义axios

//前置拦截
axios.interceptors.request.use(config => {
    //通过AES加密data数据
    //设置请求的类型
    config.headers["Content-Type"] = "application/json"

    /*---------------我是RSE+AES双重加密的------------*/
    //实现RSA
    let encryptor = new JSEncrypt() // 新建JSEncrypt对象

    //RSA设置加密的方式
    encryptor.setPublicKey(store.getters.getPublicKey) // 设置公钥

    //加密AES秘钥
    const encryptAES = encryptor.encrypt(store.getters.getAESKey);

    //把加密的AES秘钥放在请求头里
    config.headers["encryptAES"] = encryptAES

    //使用AES加密data数据 并且AES秘钥不固定
    config.data = AESECB.Encrypt(JSON.stringify(config.data), store.getters.getAESKey);

    return config
})

登录页面

methods: {
  submitForm(formName) {
    this.$refs[formName].validate((valid) => {
      if (valid) {
        const _this = this
        
        //随机给AES设置值
        _this.$store.commit("SET_AESKey", _this.randomPassword(16))

        _this.$axios.post("/login2", {
          username: _this.ruleForm.username,
          password: _this.ruleForm.password,
        }).then(res => {
          
        })
      }
    });
  },

  //根据长度随机生成key
  randomPassword(length) {
    length = Number(length)
    // Limit length
    if (length < 6) {
      length = 6
    } else if (length > 16) {
      length = 16
    }
    // let passwordArray = ['ABCDEFGHIJKLMNOPQRSTUVWXYZ', 'abcdefghijklmnopqrstuvwxyz', '1234567890', '!@#$%&*.'];
    let passwordArray = ['ABCDEFGHIJKLMNOPQRSTUVWXYZ', 'abcdefghijklmnopqrstuvwxyz', '1234567890', '随便写8位字面或者数字'];
    const password = [];
    let n = 0;
    for (let i = 0; i < length; i++) {
      // 如果密码长度小于 9，则所有值随机
      if (password.length < (length - 4)) {
        // 获取随机密码数组索引
        let arrayRandom = Math.floor(Math.random() * 4);
        // 获取密码数组值
        let passwordItem = passwordArray[arrayRandom];
        //获取密码数组值随机索引
        // 获取随机真实值
        let item = passwordItem[Math.floor(Math.random() * passwordItem.length)];
        password.push(item);
      } else {
        // 如果密码大于9，则根据随机密码索引推入最后4个密码
        // 按顺序获取数组值
        let newItem = passwordArray[n];
        let lastItem = newItem[Math.floor(Math.random() * newItem.length)];
        // 获取数组拼接索引
        let spliceIndex = Math.floor(Math.random() * password.length);
        password.splice(spliceIndex, 0, lastItem);
        n++
      }
    }
    return password.join("");
  }

}

java后端拦截器

RSAAESFilter


import com.tjw.util.AES;
import com.tjw.util.RSA;
import org.springframework.stereotype.Component;

import javax.servlet.*;
import javax.servlet.http.HttpServletRequest;
import java.io.IOException;


/**
 * 针对于AES加密 Java+vue前后端分离使用
 */
@Component
public class RSAAESFilter implements Filter {
    public String key;

    /**
     * 使用RSE加密ASE密匙不固定  ASE加密表单数据 传给后端
     *
     * @param request
     * @param response
     * @param chain
     * @throws IOException
     * @throws ServletException
     */
    @Override
    public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain) throws IOException, ServletException {
        HttpServletRequest hsr = (HttpServletRequest) request;
        //获取前端加密的
        key = hsr.getHeader("encryptAES");
        System.out.println("这是没解密的AES秘钥:" + key);
        //重新赋值AES秘钥
        AES.KEY = RSA.decryptByPrivate(key, RSA.privateKey);

        System.out.println("这是在filter里面解密的AES秘钥:" + AES.KEY);
        AESRequestWrapper aes_request = new AESRequestWrapper(hsr);
        aes_request.setAttribute("body", aes_request.body());

        chain.doFilter(aes_request, response);
    }
}

RSAAESRequestWrapper

import com.tjw.util.AES;
import org.apache.commons.io.IOUtils;

import javax.servlet.ReadListener;
import javax.servlet.ServletInputStream;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletRequestWrapper;
import java.io.ByteArrayInputStream;
import java.io.IOException;

/**
 * 针对于AES加密 Java+vue前后端分离使用
 */
public class AESRequestWrapper extends HttpServletRequestWrapper {

    private String body;

    public AESRequestWrapper(HttpServletRequest request) {
        super(request);
    }

    @Override
    public ServletInputStream getInputStream() throws IOException {
        return new SIS(new ByteArrayInputStream(body.getBytes()));
    }

    public String body() throws IOException {
        try {
            //从body中获取data的加密后的值进行解密
            body = AES.aesDecrypt(IOUtils.toString(super.getInputStream()), AES.KEY);
        } catch (Exception e) {
            e.printStackTrace();
        }
//        body = AESUtil.decrypt(IOUtils.toString(super.getInputStream()));
//        body= RSA.decryptByPrivate(IOUtils.toString(super.getInputStream()), Const.privateKey);
        return body;
    }

    class SIS extends ServletInputStream {

        private ByteArrayInputStream bais;

        public SIS(ByteArrayInputStream bais) {
            this.bais = bais;
        }

        @Override
        public boolean isFinished() {
            return true;
        }

        @Override
        public boolean isReady() {
            return true;
        }

        @Override
        public void setReadListener(ReadListener read_listener) {

        }

        @Override
        public int read() throws IOException {
            return bais.read();
        }
    }
}
我在重庆吃火辣辣的火锅
关注
  • 2
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
基于Springboot拦截器的AES报文解密
shaoduo的博客
01-05 4657
从前到后实现一个 springboot 使用Incepter拦截器解析AES密文。 1.什么是AES加密 AES是一种对称加密，这个标准用来替代原先的DES（Data Encryption Standard），已经被多方分析且广为全世界所使用。本文中AES加密方法同样适用于 DES。 AES使用起来非常简单，前后端需要一个相同的密钥，前端加密完后，将密文体发送到后端，后端使用拦截器将加密的报文拦截解析后再转发到相应处理的控制器controller。 那么如何知道哪些请求加密了哪些请求没加密呢？如何去
Java操作MyBatis-Plus通过自定义拦截器对mysql字段以注解形式实现自动加解密
weixin_43029331的博客
03-07 4794
Java操作MyBatis-Plus对mysql字段以注解形式实现自动加解密
Java+Vue对密码AES加密和RSA加密处理
weixin_43887870的博客
01-17 3901
Java+vue的AES加密和RSA加密实现
vue+koa中使用aes和rsa混合加密
~~
04-07 2047
首先需要了解以下内容： Vue中使用crypto-js进行AES对称加密：https://blog.csdn.net/qq_40323256/article/details/123688626 Vue中使用jsencrypt进行RSA非对称加密：https://blog.csdn.net/qq_40323256/article/details/124006449 生成RSA密钥对在线工具：http://web.chacuo.net/netrsakeypair 混合加密流程： 接收方创建RSA..
【VUE】VUE使用AES加密解密
踩坑日常和学习笔记
01-05 2304
1、安装 npm install crypto-js --save 或 yarn add crypto-js 2、新建JS文件 在项目scr/utils目录下新建js文件 cryptoJS.js 3、在cryptoJS.js中定义公共方法 方法1 import CryptoJS from 'crypto-js' //此处的密钥随机生成，可自行修改 const key = CryptoJS.enc.Utf8.parse('9627F8751BAC3190');//十六位十六进制数作为密钥 const iv
前端AES加密，后端解密，有效防止数据外泄
hexianfan的博客
07-13 8417
/AES加密 var key = "ABCDEFGHIJKL_key";
vue项目中使用AES实现密码加密解密（ECB和CBC两种模式）
10-16
总之，在Vue项目中实现AES加密解密可以有效保护用户数据，ECB模式简单但可能存在模式可预测性，而CBC模式通过引入初始向量提高了安全性。正确理解和运用这些加密技术，有助于构建更加安全的Web应用。在开发过程中，...
前端(javascript)使用AES、RSA对数据进行加密以及解密，本人亲测代码通过
12-11
注意：AES用的是CryptoJS库的，而RSA则是用的jsencrypt库，RSA用的公钥和私钥是PEM格式的，其他格式无法通过，同时只能支持公钥加密，私钥解密。tips：支持跨语言，支持js与.net后台的加密以及解密，如需借鉴后台...
基于前端VUE框架的 RSA 和 AES 用户登录信息远程加密传输的实现
06-03
自行实现前端用户数据与后端传输的RSA和AES加解密
如何基于python3和Vue实现AES数据加密
09-17
在本文中，我们将深入探讨如何使用Python3和Vue.js实现AES（高级加密标准）数据加密。AES是一种广泛使用的对称加密算法，适用于保护敏感信息，如在微信小程序中用于加密传输数据。对称加密算法的核心特点是加密和...
Vue使用JSEncrypt实现rsa加密及挂载方法
10-15
主要介绍了Vue使用JSEncrypt实现rsa加密及挂载方法,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
【Bcrypt+AES】 Vue+Java前后端分离信息加解密详解和问题解决
NineWaited的博客
03-12 1万+
Vue+SpringBoot实现 登录信息Bcrypt加密+后端匹配 与注册信息AES加密+后端解密。
【SpringBoot系列】vue+SpringBoot实现前后端数据加解密
热门推荐
Venus's Blog
04-25 5万+
​ 需要安装node环境​ 安装好之后然后执行。
保姆级教程—前端数据加密（Vue + Axios + AES对称 + RSA非对称）
Jensonhui's Blog
01-08 3349
## 1. 项目背景(需求) 为了保证数据传输的安全性，利用AES+RSA混合加密，配合后端实现数据交互加密 项目环境：vue + axios ## 2. 加密过程(流程） ## 3. 实现过程(代码） AES对称加密我们采用CryptoJS，AES加密支持AES-128、AES-192和AES-256(AES传送门) RSA非对称加密我们采用JSEncrypt，(RSA传送门​​​​​​​) 第一步：npm安装两个库 npm i crypto-js jsencr...
前后端数据加密传输基于AES+RSA实现
最新发布
孙霸天的专栏
09-03 4045
前后端数据加密传输基于AES+RSA实现，优化升级版本
vue中使用RSA和AES混合加密数据
ma_pei的博客
08-12 2557
参考： 1、https://segmentfault.com/q/1010000019988541 2、https://zhidao.baidu.com/question/711805904386197965.html 3、https://blog.csdn.net/Stiven_Lu/article/details/83063378 1.获取16位随机数key， 2.获取后台返回的公钥 3.使用...
JavaScript实现http请求数据加解密
菜得抠拇指
07-11 2657
前端实现后端返回数据解密，密文传参及敏感字段加密。 方案： 1、获取公钥一及密钥二（公钥和密钥不是一对，不然就可以自己加解密） 2、选择加密算法（本人用的是：RSA） 流程： 遇到的问题： 1、加解密字符长度（以往文章有写过RSA超长字符加解密） 2、JavaScript RSA算法框架不能实现公钥加密公钥解密 3、一次性发送多次请求算法延迟（会导致同时发送出去的请求数据一
前端加密，后端解密的过程及代码（密码明文传输解决，不是太保险。key在前端有显示）
weixin_44538241的博客
08-05 9705
解决明文传输，AES前端加密后端解密
vue+axios+koa 前端后端实现登录拦截--http拦截
saucxs
06-25 1508
一、前言 要想统一处理所有http请求和响应，就得用上 axios 的拦截器。通过配置http response inteceptor，当后端接口返回401 Unauthorized（未授权），让用户重新登录。 二、具体实现 当前端使用localStorage存储登陆信息，但是这个时候，后端一般在登陆的成功的时候，使用JWT（json web token）会生成token，这个toke...
aes前端vue解密 后端java加密， 如何实现？
07-14
要实现前端使用Vue进行AES解密，后端使用Java进行AES加密的功能，可以按照以下步骤进行操作： 1. 前端（Vue）实现AES解密： - 在Vue中引入CryptoJS库或其他相关的AES加密解密库。 - 使用AES解密算法对密文进行...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值