网站开发时如何兼容国际新闻军事最新消息

页面输入用户名密码登录过程中，如果没有对用户名密码进行加密处理，可能会导致传输过程中数据被窃取，就算使用https协议，在浏览器控制台的Request Payload中也是能直接看到传输的明文，安全感是否还是不足。

大致流程：前端，在请求登录接口之前对用户名密码进行加密，服务端收到请求后解密得到明文的用户名密码。

这里使用RSA非对称加密，前端使用公钥加密，后端使用私钥解密，这样就不会暴露私钥。

一、后端

1、pom文件添加依赖

        <dependency><groupId>cn.hutool</groupId><artifactId>hutool-core</artifactId><version>5.8.22</version></dependency><dependency><groupId>cn.hutool</groupId><artifactId>hutool-crypto</artifactId><version>5.8.22</version></dependency>

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;
}

前端加密后请求，后端解密得到明文。