前端加密后端解密之Base64通用加密处理

8 篇文章 4 订阅
2 篇文章 0 订阅

近期在工作中遇到很经典的问题,关于前端加密后端解密,我只用了一种通用的Base64加密方式,关于前端加密方式我使用的是Base64插件

具体可以去下载Base64.js

下面先看下前端加密:

首先在html中引入jquery的js插件和base64js插件,然后编辑被加密数据

<script>

var str="abcd1234";

alert("加密前:"+str);

var base = new Base64();

var encodeStr=base.encode(str);

alert("加密后:"+encodeStr);

var decodeStr=base.decode(encodeStr);

alert("解密后:"+decodeStr)

</script>


下面是处理结果:

然后前端加密成功之后将参数传入后端,后端处理方式很简单,先引用BASE64Util.java工具包,这里我把代码贴出来:

package com.wy.component.dataConvert;

import java.io.IOException;

import sun.misc.BASE64Decoder;
import sun.misc.BASE64Encoder;

/**
 * BASE64算法工具类,该算法封装了对字符串,
 * 字节数组的加密和字符串解密的功能.
 * @author mzllon
 * @version 1.0,05/21/2012
 *
 */
public final class BASE64Util {
	/**
	 * 采用BASE64算法对字符串进行加密
	 * @param base 原字符串
	 * @return 加密后的字符串
	 */
	public static final String encode(String base){
		return BASE64Util.encode(base.getBytes());
	}
	
	/**
	 * 采用BASE64算法对字节数组进行加密
	 * @param baseBuff 原字节数组
	 * @return 加密后的字符串
	 */
	public static final String encode(byte[] baseBuff){
		return new BASE64Encoder().encode(baseBuff);
	}
	
	/**
	 * 字符串解密,采用BASE64的算法
	 * @param encoder 需要解密的字符串
	 * @return 解密后的字符串
	 */
	public static final String decode(String encoder){
		try {
			BASE64Decoder decoder = new BASE64Decoder();
			byte[] buf = decoder.decodeBuffer(encoder);
			return new String(buf);
		} catch (IOException e) {
			e.printStackTrace();
			return null;
		}
	}
	
}
后端在接收到前端传递过来的参数之后,通过调用BASE64Util工具类中的解密方法解密参数
这里面我自己写个Test的main方法,假装我已经拿到前端传递过来的加密字符串:
中间前端通过什么方式传递,后端通过什么方式获取前端传递数据,由于方式过多,框架不同,我就不列举了,另外附加两张Base64在线加解密同样的处理结果:
Base64在线加解密http://base64.xpcha.com
在线加密前,加密后
在线解密后:

  • 7
    点赞
  • 51
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 3
    评论
前端使用 Vue,后端使用 Java 来实现前端后端解密base64 加方式,你可以按照以下步骤进行操作。 前端代码(Vue): ```html <template> <div> <!-- 前端输入框 --> <input v-model="inputData" type="text" placeholder="输入要加密的数据" /> <!-- 加密按钮 --> <button @click="encryptData">加密</button> <!-- 加密后的数据 --> <p>加密后的数据:{{ encryptedData }}</p> <!-- 传输到后端的数据 --> <p>传输到后端的数据:{{ transmittedData }}</p> </div> </template> <script> export default { data() { return { inputData: '', encryptedData: '', transmittedData: '' }; }, methods: { encryptData() { // 使用 base64 加密数据 this.encryptedData = btoa(this.inputData); // 传输到后端的数据为加密后的数据 this.transmittedData = this.encryptedData; } } }; </script> ``` 后端代码(Java): ```java import java.util.Base64; public class Main { public static void main(String[] args) { String transmittedData = "加密后的数据"; // 假设这是前端传输到后端加密数据 // 解密传输过来的数据 byte[] decodedBytes = Base64.getDecoder().decode(transmittedData); String decryptedData = new String(decodedBytes); System.out.println("解密后的数据:" + decryptedData); } } ``` 以上代码实现了前端使用 Vue 对输入的数据进行 base64 加密,并将加密后的数据传输到后端后端使用 Java 对传输过来的数据进行解密,并输出解密后的数据。 请注意,这只是一个简单的示例,实际应用中可能需要更多的安全措施和错误处理。另外,前端使用了浏览器内置的 `btoa` 方法进行加密后端使用了 Java 8 的 `Base64` 类进行解密
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

zsw_sh

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值