AES 加密实践 SpringBoot + Vue

前端

Vue安装crypto-js

npm install crypto-js

编写 js 文件

import CryptoJS from 'crypto-js';
// 密钥一定要16位
const secretKey = '8332dd5974c46b93';

// 加密
export function encrypt(data) {
    const encrypted = CryptoJS.AES.encrypt(data, CryptoJS.enc.Utf8.parse(secretKey), {
        mode: CryptoJS.mode.ECB,
        padding: CryptoJS.pad.Pkcs7
    });
    return encrypted.toString();
}

// 解密
export function decrypt(encryptedData) {
    const bytes = CryptoJS.AES.decrypt(encryptedData, secretKey);
    return bytes.toString(CryptoJS.enc.Utf8);
}

编写登录请求

import request from "@/utils/request";

export function login(user) {
    console.log(user)
    return request({
        url: '/login',
        method: 'post',
        data: user
    })
}

登录页面

<template>
    <div class="login">
        <el-card class="box-card">
            <div class="card-text">
                <el-form :model="loginForm" style="margin-top: 8%" :rules="rules" ref="loginForm">
                    <el-form-item prop="username">
                        <el-input v-model="loginForm.username" prefix-icon="el-icon-user" placeholder="用户名"></el-input>
                    </el-form-item>
                    <el-form-item prop="password">
                        <el-input v-model="loginForm.password" prefix-icon="el-icon-lock" placeholder="密码" show-password></el-input>
                    </el-form-item>
                    <el-button type="primary" style="width: 100%" @click="loginValidate()">登录</el-button>
                </el-form>
            </div>
        </el-card>
    </div>
</template>

<script>
import { login } from "@/api/login"
import { encrypt } from "@/utils/encrypt"
export default {
    data() {
        return {
            loginForm: {
                username: null,
                password: null
            },
            rules: {
                username: [
                    { required: true, message: '用户名不能为空', trigger: 'blur' }
                ],
                password: [
                    { required: true, message: '密码不能为空', trigger: 'blur' }
                ]
            }
        }
    },
    methods: {
        loginValidate() {
            this.$refs["loginForm"].validate((valid) => {
            	// 验证非空
                if (!valid) return
                // 加密数据
                var userData = encrypt(JSON.stringify(this.loginForm))
                login(userData).then(resp => {
                    alert(resp.data)
                })
            })
        }
    }
}
</script>

<style scoped>
.login {
    background-color: #708090;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.box-card {
    width: 400px;
}

.card-text {
    text-align: center;
}
</style>

后端

SpringBoot 引入 Gson

<dependency>
    <groupId>com.google.code.gson</groupId>
    <artifactId>gson</artifactId>
    <version>2.8.8</version>
</dependency>

编写Controller

@RestController
// 解决跨域问题
@CrossOrigin
@Slf4j
public class LoginController {

    @PostMapping("/login")
    public String login(@RequestBody String userData) throws Exception {
    	// 用 json 接收字符串会出现 原数据 123 ，接收到的数据 "123"
    	// 使用 replaceAll 转义\" 删除
        userData = userData.replaceAll("\"", "");
        log.info("解密前=> {}", userData);
        String encrypt = EncryptUtils.decrypt(userData);
        log.info("解密后=> {}", encrypt);
        AdminUserBean adminUserBean = JSONUtils.jsonToObject(encrypt, AdminUserBean.class);
        log.info("序列化后=> {}", adminUserBean);
        return "登录成功";
    }
}

解密工具

public class EncryptUtils {
    public static String decrypt(String data) throws Exception {
        Cipher instance = Cipher.getInstance(AesEncrypt.PADDING);
        instance.init(Cipher.DECRYPT_MODE, AesEncrypt.SECRETKEYSPEC);
        byte[] decodedData = Base64.getDecoder().decode(data);
        byte[] decryptedData = instance.doFinal(decodedData);
        return new String(decryptedData,"UTF-8");
    }
}

密钥配置

public class AesEncrypt {
    /** 密钥 */
    public static final String KEY = "8332dd5974c46b93";
    /** 加密方式 */
    public static final String ALGORITHM = "AES";
    /** 密钥对象 */
    public static final SecretKeySpec SECRETKEYSPEC;
    /** 加密算法*/
    public static final String PADDING = "AES/ECB/PKCS5Padding";

    static {
        SECRETKEYSPEC = new SecretKeySpec(KEY.getBytes(), ALGORITHM);
    }
}

序列化工具

public class JSONUtils {

    private static final Gson gson;

    static {
        gson = new Gson();
    }

    public static <T> T jsonToObject(String jsonData, Class<T> clazz) {
        return gson.fromJson(jsonData, clazz);
    }
}

执行结果

INFO c.maoslv.api.controller.LoginController  : 解密前=> A09XkUuP8BoNng6p77DlYLf1JjMFbqrj0dKvE7XfSaaDoVnYL/PKfcM/mqrcKbrH
INFO c.maoslv.api.controller.LoginController  : 解密后=> {"username":"123","password":"123"}
INFO c.maoslv.api.controller.LoginController  : 序列化后=> AdminUserBean(id=null, code=null, username=123, password=123, gender=null, createTime=null, updateTime=null, Deleted=null)

本文章举个简单例子，实际还是要以开发中为主