在一般的前后端分离项目当中,时常会有敏感信息明文传输的情况存在。这里我们采用前端数据请求加密,后台数据接收解密来防止他人截取用户等敏感信息。
1.常用的base64加解密
前端需要首先安装base64,使用npm命令:npm install base-64。随后便可以进行加密操作。
import Base64 from 'base-64';
handleSubmit = () => {
this.switchLoading(true)
const { form, history, dispatch } = this.props
const payload = {
_this: this,
history
}
form.validateFields((err, values) => {
if(!err){
//引入base64后,在这里进行base64加密!!!
values.username = Base64.encode(values.username)
values.password = Base64.encode(values.password)
dispatch(doLogin({...payload, values}))
}else{
this.switchLoading(false)
}
})
}
后台接口使用base64进行解密操作,后续便可以继续正常的业务流程。
//使用JavaUtil的Base64进行解密操作
//Base64 解密
byte[] undecoded = Base64.getDecoder().decode(sysUser.getUsername());
byte[] pwdecoded = Base64.getDecoder().decode(sysUser.getPassword());
String unameStr = new String(undecoded);
String pwdStr = new String(pwdecoded);
sysUser.setUsername(unameStr);
sysUser.setPassword(pwdStr);
2.AES加解密
此处需要引入crypto-js做前端数据的加密,同时密钥和偏移量要保持与后端一致。
<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.9-1/crypto-js.js"></script>
function yhmmadl() {
$("#loginbtn").hide();
$("#loginbtnhide").show();
$("#loginbtnhide").attr("disabled","true");
//对用户登录信息做加密处理
//密钥 (前后端一致)十六位
let key = "abcdefghijkl_key";
//偏移量 (前后端一致)十六位
let iv = "abcdefghijklm_iv";
//获取加密后的密码
let us = aesMinEncrypt(key,iv,$("#input_username").val());
let pa = aesMinEncrypt(key,iv,$("#input_password").val()+ "-" + "<%=clientIP%>");
$("#username").val(us);
$("#password").val(pa);
}
后台使用 进行AES解密。
//密钥 (前后端一致)十六位
private static final String KEY = "abcdefghijkl_key";
//偏移量 (前后端一致)十六位
private static final String IV = "abcdefghijklm_iv";
//解密
public static String aesDecrypt(String encryptStr) {
String result;
try {
result = StringUtils.isEmpty(encryptStr) ? null : aesDecryptByBytes(base64Decode(encryptStr));
} catch (Exception e) {
result = "decrypt exception";
e.printStackTrace();
}
return result;
}