Vue前端服务加密后端服务解密--AES算法实现

在实际项目中考虑到用户数据的安全性，在用户登录时，前端需要对用户密码加密（防止用户密码泄露），服务端收到登录请求时先对密码进行解密，然后再进行用户验证登操作。本文使用 AES ECB 模式算法来实现前端机密后端解密基本流程。

基本流程

1. 用户在登录页输入用户信息，点击登录按钮时，前端需要对用户密码进行加密，再去请求登录接口，进行登录；
2. 如果用户选择记住密码，注意cookie或localStorage中要保存加密后的密码，以防止密码泄露；
3. 当用户再次回到登录页时（用户退出或令牌过期时），从cookie或localStorage中拿到加密密码要先解密然后初始化到密码框中；
4. 服务端收到登录请求，先进行密码解密，然后再去验证用户的有效性；
5. 或者先根据用户名去获取用户信息，然后对该用户密码加密，再去跟前端传的密码比对，以验证密码的有效性。

后端加密算法

pom.xml 引入

<dependency><groupId>org.bouncycastle</groupId><artifactId>bcprov-jdk15on</artifactId><version>1.56</version></dependency><!-- fastjson2 --><dependency><groupId>com.alibaba.fastjson2</groupId><artifactId>fastjson2</artifactId><version>2.0.51</version></dependency>

AES 工具类

packagecom.angel.ocean.util;importjavax.crypto.Cipher;importjavax.crypto.spec.SecretKeySpec;importcom.alibaba.fastjson2.JSON;importlombok.extern.slf4j.Slf4j;importorg.apache.tomcat.util.codec.binary.Base64;importjava.security.Security;importjava.util.Objects;@Slf4jpublicclassAESUtil{// AES 秘钥privatestaticfinalString key ="5JKRGV0QO4WK1WCWVK55YEU0A1NPOXOP";privateAESUtil(){}/**
     * AES 加密
     */publicstaticStringencrypt(Object content)throwsException{String data ="";if(null== content){returnnull;}// 判断content是否为字符串if(content instanceofString){
            data = content.toString();}else{
            data =JSON.toJSONString(content);}// 将加密过的byte[]数据转换成Base64编码字符串returnbase64ToString(aesECBEncrypt(data.getBytes(), key.getBytes()));}/**
     * AES解密
     */publicstaticObjectdecrypt(String content){if(null== content){returnnull;}try{byte[] base64 =stringToBase64(content);byte[] bytes =aesECBDecrypt(base64, key.getBytes());String result =newString(bytes);String data = result.replaceAll("\"","");// 判断解密出来的数据是字符串还是jsonif(data.startsWith("{")&& data.endsWith("}")){returnJSON.parse(data);}else{return data;}}catch(Exception e){
            log.error("AESUtil.decrypt() error, {}", e.getMessage(), e);}returnnull;}privatestaticbyte[] aesECBEncrypt (byte[] content,byte[] keyBytes){try{SecretKeySpec key =newSecretKeySpec(keyBytes,"AES");Security.addProvider(neworg.bouncycastle.jce.provider.BouncyCastleProvider());Cipher cipher =Cipher.getInstance("AES/ECB/PKCS7Padding");
            cipher.init(Cipher.ENCRYPT_MODE, key);return cipher.doFinal(content);}catch(Exception e){
            log.error("AESUtil.aesECBEncrypt() error, {}", e.getMessage(), e);}returnnull;}privatestaticbyte[]aesECBDecrypt(byte[] content,byte[] keyBytes){try{SecretKeySpec key =newSecretKeySpec(keyBytes,"AES");Security.addProvider(neworg.bouncycastle.jce.provider.BouncyCastleProvider());Cipher cipher =Cipher.getInstance("AES/ECB/PKCS7Padding");
            cipher.init(Cipher.DECRYPT_MODE, key);return cipher.doFinal(content);}catch(Exception e){
            log.error("AESUtil.aesECBDecrypt() error, {}", e.getMessage(), e);}returnnull;}/**
     * 将字符串转换成Base64
     */publicstaticbyte[]stringToBase64(String key)throwsException{returnBase64.decodeBase64(key.getBytes());}/**
     * 将Base64转换成字符串
     */publicstaticStringbase64ToString(byte[] key)throwsException{returnnewBase64().encodeToString(key);}publicstaticvoidmain(String[] args)throwsException{// 明文String data ="123456";// 加密String encryptData =encrypt(data);
        log.info("encryptData: {}", encryptData);// 解密String decryptData =Objects.requireNonNull(decrypt(encryptData)).toString();
        log.info("decryptData: {}", decryptData);}}

main运行结果

Vue前端加密

安装crypto-js

npm install crypto-js

引入crypto-js

import CryptoJS from'crypto-js'

AES 秘钥

const key ='5JKRGV0QO4WK1WCWVK55YEU0A1NPOXOP'

加密解密方法

methods:{encrypt(data){var secretKey = CryptoJS.enc.Utf8.parse(key);var srcs = CryptoJS.enc.Utf8.parse(data);var encrypted = CryptoJS.AES.encrypt(srcs, secretKey,{mode:CryptoJS.mode.ECB,padding: CryptoJS.pad.Pkcs7});return encrypted.toString();},decrypt(data){var secretKey = CryptoJS.enc.Utf8.parse(key);var decrypt = CryptoJS.AES.decrypt(data, secretKey,{mode:CryptoJS.mode.ECB,padding: CryptoJS.pad.Pkcs7});return CryptoJS.enc.Utf8.stringify(decrypt).toString();}}

密码：123456，加密后的密码截图：