Vue项目里用SM4加密用户密码，我是这样和后端联调的（附完整代码）
Vue项目实战：SM4国密加密与后端联调全指南
1. 为什么选择SM4加密？
最近接手了一个金融类项目，涉及到用户支付密码的传输安全。在技术方案评审会上，后端团队坚持要求使用国密算法SM4进行前端加密。一开始我还有些犹豫——毕竟AES用得更普遍，资料也多。但深入了解后发现，SM4作为国家密码局认证的标准算法，在安全性上完全不输AES，而且特别适合国内项目。
SM4属于对称加密算法，密钥和分组长度都是128位。与AES相比，它的优势在于：
- 合规性：满足国内金融、政务等领域的安全要求
- 性能：加解密速度快，特别适合移动端应用
- 标准化：已成为国际ISO/IEC标准
// 简单对比SM4与AES const cryptoInfo = { algorithms: { SM4: { keyLength: 128, blockSize: 128, standard: '国密' }, AES: { keyLength: 128/192/256, blockSize: 128, standard: '国际' } }, performance: { SM4: '更适合中文环境', AES: '全球通用' } };提示：选择加密算法时，不仅要考虑技术因素，还要注意合规要求。金融类项目优先考虑国密算法。
2. 前端加密方案设计
2.1 加密模式选择
SM4支持ECB和CBC两种加密模式，我们的项目最终选择了CBC模式。这个决策过程值得分享一下：
ECB模式特点：
- 简单直接，每个数据块独立加密
- 并行计算效率高
- 相同明文生成相同密文，安全性较低
CBC模式特点：
- 引入初始化向量(IV)，增强安全性
- 前一块密文参与下一块加密
- 国际标准推荐模式
// 模式选择决策矩阵 const modeDecision = { factors: ['安全性', '性能', '实现复杂度'], ECB: [3, 5, 5], // 评分1-5 CBC: [5, 4, 4] };2.2 密钥管理方案
密钥安全是加密系统的核心。我们与后端团队协商后确定了这样的方案：
- 开发环境：使用统一的测试密钥
- 生产环境：
- 前端通过HTTPS从后端动态获取密钥
- 密钥定期轮换
- 结合业务流水号生成临时密钥
# 示例密钥生成命令（后端） openssl rand -hex 16 # 生成128位密钥3. 前端实现细节
3.1 加密库选择
调研了几个SM4实现库，最终选择了sm-crypto，原因如下：
- 纯JavaScript实现，无外部依赖
- 支持浏览器和Node.js环境
- 维护活跃，文档齐全
安装方式：
npm install sm-crypto --save3.2 核心加密代码
在utils目录下创建crypto.js作为加密模块：
import { sm4 } from 'sm-crypto'; const DEFAULT_KEY = 'JeF8U9wHFOMfs2Y8'; // 默认测试密钥 const DEFAULT_IV = 'UISwD9fW6cFh9SNS'; // 默认IV export const encryptSM4 = (text, key = DEFAULT_KEY, iv = DEFAULT_IV) => { try { return sm4.encrypt(text, key, { iv, mode: 'cbc', output: 'base64' }); } catch (error) { console.error('SM4加密失败:', error); return null; } }; export const decryptSM4 = (text, key = DEFAULT_KEY, iv = DEFAULT_IV) => { try { return sm4.decrypt(text, key, { iv, mode: 'cbc', output: 'string' }); } catch (error) { console.error('SM4解密失败:', error); return null; } };3.3 Vue组件集成
在登录组件中使用加密功能：
import { encryptSM4 } from '@/utils/crypto'; export default { methods: { async handleSubmit() { try { const encryptedPwd = encryptSM4(this.form.password); if (!encryptedPwd) { this.$message.error('密码加密失败'); return; } const res = await loginApi({ username: this.form.username, password: encryptedPwd }); // 处理登录结果... } catch (error) { console.error('登录失败:', error); } } } }4. 前后端联调实战
4.1 联调准备清单
与后端联调前，确保双方确认以下参数：
| 参数项 | 示例值 | 说明 |
|---|---|---|
| 加密算法 | SM4 | 必须一致 |
| 加密模式 | CBC | ECB/CBC |
| 密钥 | JeF8U9wHFOMfs2Y8 | 16字节字符串 |
| IV向量 | UISwD9fW6cFh9SNS | CBC模式必需 |
| 输出编码 | Base64 | 也可以是Hex |
| 填充方式 | PKCS#7 | 默认 |
4.2 常见问题排查
在联调过程中，我们遇到了几个典型问题：
编码不一致：
- 现象：后端解密失败
- 原因：前端使用Base64，后端期望Hex
- 解决：统一使用Base64编码
IV向量问题：
- 现象：每次加密结果不同
- 原因：前端未固定IV值
- 解决：开发阶段使用固定IV，生产环境动态获取
密钥长度不符：
- 现象：加密时报错
- 原因：密钥不是16字节
- 解决：使用
key = key.padEnd(16, '0').slice(0, 16)补齐
// 密钥处理工具函数 function processKey(rawKey) { if (typeof rawKey !== 'string') return null; return rawKey.padEnd(16, '0').slice(0, 16); }4.3 联调测试用例
建议按照以下顺序测试：
- 固定明文测试（双方使用相同明文、密钥验证）
- 随机明文测试
- 特殊字符测试（中文、符号等）
- 长文本测试
- 性能测试（大量快速请求）
// 测试用例示例 const testCases = [ { input: '123456', expected: '5jD5Z...' }, { input: '密码@123', expected: 'kF8jD...' }, { input: '', expected: '...' } // 边界测试 ];5. 安全增强实践
5.1 动态密钥方案
生产环境建议实现动态密钥获取：
async getEncryptionKey() { try { const res = await getKeyApi(); return res.data.key; } catch (error) { console.error('获取加密密钥失败:', error); return null; } }5.2 加密性能优化
对于频繁加密场景（如表单实时校验），可以：
- 预加载加密模块
- 使用Web Worker后台加密
- 实现加密缓存（谨慎使用）
// Web Worker加密示例 const cryptoWorker = new Worker('crypto-worker.js'); cryptoWorker.onmessage = (e) => { console.log('加密结果:', e.data); }; cryptoWorker.postMessage({ type: 'encrypt', text: 'password123', key: 'testKey1234567890' });5.3 防调试保护
为防止前端加密被绕过，可以：
- 混淆加密代码
- 检测开发者工具
- 添加时间戳校验
- 实现请求签名
// 简单的防调试检测 setInterval(() => { const debugger = new Date(); if (new Date() - debugger > 100) { console.warn('调试检测警告'); // 可以触发安全处理逻辑 } }, 1000);6. 项目经验总结
在实际项目中，SM4加密方案运行稳定，但也遇到几个值得注意的点：
- 移动端兼容性：部分低端Android机型加密速度较慢，需要做性能测试
- 密钥管理：生产环境密钥绝对不能硬编码在前端代码中
- 错误处理：加密失败要有降级方案，不能阻塞正常业务流程
- 监控报警：加密失败率需要监控，超过阈值要报警
// 加密监控示例 const encryptWithMonitor = (text) => { const start = performance.now(); const result = encryptSM4(text); const duration = performance.now() - start; // 上报加密性能 monitor.report('sm4_encrypt', { duration, success: !!result, textLength: text.length }); return result; };最后，分享一个实用技巧：在联调阶段，可以先用在线SM4加密工具（如i在线工具网）验证加密结果，快速定位是前端还是后端的问题。