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 工具类

package com.angel.ocean.util;

import javax.crypto.Cipher;
import javax.crypto.spec.SecretKeySpec;
import com.alibaba.fastjson2.JSON;
import lombok.extern.slf4j.Slf4j;
import org.apache.tomcat.util.codec.binary.Base64;
import java.security.Security;
import java.util.Objects;

@Slf4j
public class AESUtil {

    // AES 秘钥
    private static final String key = "5JKRGV0QO4WK1WCWVK55YEU0A1NPOXOP";

    private AESUtil() {}

    /**
     * AES 加密
     */
    public static String encrypt(Object content) throws Exception {

        String data = "";

        if(null == content) {
            return null;
        }

        // 判断content是否为字符串
        if (content instanceof String) {
            data = content.toString();
        } else {
            data = JSON.toJSONString(content);
        }

        // 将加密过的byte[]数据转换成Base64编码字符串
        return base64ToString(aesECBEncrypt(data.getBytes(), key.getBytes()));
    }

    /**
     * AES解密
     */
    public static Object decrypt(String content) {

        if(null == content) {
            return null;
        }

        try {

            byte[] base64 = stringToBase64(content);
            byte[] bytes = aesECBDecrypt(base64, key.getBytes());
            String result = new String(bytes);
            String data = result.replaceAll("\"", "");

            // 判断解密出来的数据是字符串还是json
            if (data.startsWith("{") && data.endsWith("}")) {
                return JSON.parse(data);
            } else {
                return data;
            }

        } catch (Exception e) {
            log.error("AESUtil.decrypt() error, {}", e.getMessage(), e);
        }

        return null;
    }

    private static byte[] aesECBEncrypt (byte[] content, byte[] keyBytes) {

        try {
            SecretKeySpec key = new SecretKeySpec(keyBytes, "AES");
            Security.addProvider(new org.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);
        }

        return null;
    }

    private static byte[] aesECBDecrypt(byte[] content, byte[] keyBytes) {

        try {
            SecretKeySpec key = new SecretKeySpec(keyBytes, "AES");
            Security.addProvider(new org.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);
        }

        return null;
    }

    /**
     * 将字符串转换成Base64
     */
    public static byte[] stringToBase64(String key) throws Exception {
        return Base64.decodeBase64(key.getBytes());
    }

    /**
     * 将Base64转换成字符串
     */
    public static String base64ToString(byte[] key) throws Exception {
        return new Base64().encodeToString(key);
    }

    public static void main(String[] args) throws Exception {

        // 明文
        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，加密后的密码截图：