Vue与Java国密SM4实战：前后端统一加密解密方案解析

1. 国密SM4算法基础认知

第一次接触SM4加密时，我和很多开发者一样被各种专业术语搞得晕头转向。简单来说，SM4就像是一个国产的密码保险箱，你和对方约定好相同的钥匙（密钥），就能安全地传递物品（数据）。这个保险箱有以下几个特点：

• 对称加密：加解密使用同一把钥匙，就像现实中的保险箱
• 128位强度：密钥和加密块都是128位，相当于16个字符长度
• 国标认证：国家密码管理局2012年发布的标准（GM/T 0002-2012）

实际项目中遇到过这样的场景：用户注册时，前端需要加密密码传输，后端解密后存储。有次测试环境没对齐加密模式，导致后台一直解密失败，排查了半天才发现前端用ECB模式而后端用CBC模式。这种基础概念不清晰导致的坑，咱们后面会重点讲解如何避免。

2. 前端Vue实现方案

2.1 三种实现方式对比

最近在金融项目里实测了三种前端实现方案，这里做个直观对比：

推荐使用sm-crypto的方案，实测代码最简洁：

// 安装
npm install sm-crypto

// 加密示例
import { sm4 } from 'sm-crypto'
const key = '0123456789abcdeffedcba9876543210' // 16字节十六进制密钥
const cipherText = sm4.encrypt('明文数据', key) 

// 解密示例
const plainText = sm4.decrypt(cipherText, key)

2.2 密钥管理的安全实践

见过不少项目把密钥硬编码在前端代码里，这相当于把保险箱钥匙挂在门上。推荐两种更安全的做法：

1. 动态密钥交换：

// 登录时从服务端获取临时密钥
a