页面输入用户名密码登录过程中，如果没有对用户名密码进行加密处理，可能会导致传输过程中数据被窃取，就算使用https协议，在浏览器控制台的Request Payload中也是能直接看到传输的明文，安全感是否还是不足。
大致流程：前端，在请求登录接口之前对用户名密码进行加密，服务端收到请求后解密得到明文的用户名密码。
这里使用RSA非对称加密，前端使用公钥加密，后端使用私钥解密，这样就不会暴露私钥。
一、后端
1、pom文件添加依赖
2、加密解密工具类
import cn.hutool.crypto.asymmetric.KeyType;
import cn.hutool.crypto.asymmetric.RSA;
public class SecretConstant {
/**
* 登陆相关
*/
public class LoginSecret{
/**
* 非对称加密 私钥 公钥私钥可以自己用代码生成，也可以在线生成，例如：https://tool.ip138.com/rsa/
*/
public static final String PRIVATE_KEY = "MIIBOAIBAAJAflJQPKoKO9gz9Op2XINkHXVIyonzt/HClZRVf+2MyF4OLGckiBLM\n" +
"rLq6jN/U4JlgIxCIni3zOsJdhIIF1D6fQwIDAQABAkAsKpeHPmSpm+Q+o6OSoRXl\n" +
"/tXeivE9xTelmOF0AxiQDWRu1XWKAmjR2kKBgN/B9NlhBjW5+p4PW30UI7uCyKUR\n" +
"AiEAw8ba06ZG7CZyXZVD8MhFx0ztg0kIE+ZLOqGpjSpKC70CIQClLfTWxpTbF4gb\n" +
"lxDOJL5G1XiXcM516MUz6q3udTiG/wIgZ0v929yI4ULr5urB/UJ+Zsj1LOcUxwMk\n" +
"wFvaDSy6AvUCIAehu/JAcpg82hkMPcaIhBIZwtycZa2k95eSfD7MQ7RZAiA+Y8yI\n" +
"MkG4asXqoh2jryn40ih2q/GnXoCwdPXUa9E4MA==";
/**
* 非对称加密 公钥
*/
public static final String PUBLIC_KEY = "MFswDQYJKoZIhvcNAQEBBQADSgAwRwJAflJQPKoKO9gz9Op2XINkHXVIyonzt/HClZRVf+2MyF4OLGckiBLMrLq6jN/U4JlgIxCIni3zOsJdhIIF1D6fQwIDAQAB";
}
/**
* 测试一下
* @param args
*/
public static void main(String[] args) {
String un = "admin";
String pw = "admin@123456";
// 用户名密码解密
RSA rsa = new RSA(SecretConstant.LoginSecret.PRIVATE_KEY, SecretConstant.LoginSecret.PUBLIC_KEY);
String un_jm = rsa.encryptBase64(un,KeyType.PublicKey);
System.out.println("公钥加密后："+un_jm);
// 前端传过来的用户名密码是通过公钥加密的
String userName_plaintext = rsa.decryptStr(un_jm, KeyType.PrivateKey);
System.out.println("私钥解密后："+userName_plaintext);
// 加密后的密文
String temp = "djCaCjhwVRc29vNHEIUqoGkn0azDjGdjHHV+zetw8GcKmJ8u2/VgAX54G/zzpcrBrpkR+SmS7QPkpSz5s05OLA==";
System.out.println("私钥解密后："+rsa.decryptStr(temp, KeyType.PrivateKey));
}
}
3、使用示例
public BaseResult login(String userNameCipher, String passwordCipher) {
// 用户名密码解密
RSA rsa = new RSA(SecretConstant.LoginSecret.PRIVATE_KEY, SecretConstant.LoginSecret.PUBLIC_KEY);
String userName = rsa.decryptStr(userNameCipher, KeyType.PrivateKey);
String password = rsa.decryptStr(passwordCipher, KeyType.PrivateKey);
// 登录逻辑...
}
二、前端
前端使用公钥加密，秘钥可以直接写在js文件中，因为用的是公钥所以不怕泄漏，当然了，如果想灵活一点，可以把公钥放在后端，前端通过接口查询得到公钥。
1、加密工具类
文件名称encryptUtils.js，内容如下，其他地方调用即可。
import JSEncrypt from 'jsencrypt';
// 可能需要需要先安装jsencrypt库，执行：npm install jsencrypt
/**
* 登录使用的公钥，
* 如果想灵活一点，可以把公钥放在后端，前端通过接口查询得到公钥。
* @type {string}
*/
const LOGIN_PUBLIC_KEY = "MFswDQYJKoZIhvcNAQEBBQADSgAwRwJAflJQPKoKO9gz9Op2XINkHXVIyonzt/HClZRVf+2MyF4OLGckiBLMrLq6jN/U4JlgIxCIni3zOsJdhIIF1D6fQwIDAQAB";
/**
* 获取登录使用的公钥
* @returns {string}
*/
export const getLoginPublicKey = () => {
return LOGIN_PUBLIC_KEY;
}
/**
* 加密
* @param text 需要加密的文本
* @param publicKey 公钥
* @returns {string | false}
*/
export const encodeStr = (text, publicKey) => {
// RSA（非对称加密）
const JSE = new JSEncrypt();
// 设置公钥
JSE.setPublicKey(publicKey);
return JSE.encrypt(text);
}
2、使用示例
在需要加密的地方调用上面的方法
import request from '@/utils/request';
import { getLoginPublicKey, encodeStr } from '@/utils/encryptUtils';
/**
* 请求后端登录的方法
*/
export async function login(params) {
// 公钥加密
params.userName = encodeStr(params.userName, getLoginPublicKey());
params.password = encodeStr(params.password, getLoginPublicKey());
const result = await request('/api/v1/user/login', {
method: 'POST',
type: 'JSON',
body: params
});
return result;
}
前端加密后请求，后端解密得到明文。