vue 3 中可用 crypto-js 的 sha-256 对 password、idcard 等敏感字段哈希后发送，需与后端算法、编码、空格处理及 salt（若使用）完全一致，非敏感字段如 username 不应哈希。
在 Vue 3 项目中，请求拦截器可以在发送前对敏感字段（如密码、手机号、身份证号等）做哈希处理，常见做法是用 SHA-256 替代已不安全的 MD5。关键不是“加盐”或“加密”，而是统一生成不可逆的摘要值，让后端能比对校验。
明确哪些字段需要哈希
不是所有字段都要哈希，只处理明确敏感且后端约定需校验摘要的字段，例如：
- password：登录时前端先哈希再传，避免明文暴露
- idCard 或 phone：用于实名核验接口，后端按相同规则计算比对
- 避免对
username、email等非敏感字段哈希，否则影响查询和调试
使用 crypto-js 实现 SHA-256 哈希
推荐用 crypto-js（轻量、兼容性好），不依赖 Node.js 的 crypto 模块（浏览器环境不可用）：
- 安装：
npm install crypto-js - 封装工具函数（如
src/utils/hash.js）：
export function hashSHA256(str) {
return CryptoJS.SHA256(str).toString(CryptoJS.enc.Hex)
}
在 axios 请求拦截器中自动处理
在请求发出前检查 data 或 params，对目标字段调用哈希函数：
- 只处理
POST、PUT等含 body 的请求 - 判断字段是否存在且非空，避免对
null/undefined哈希出意外值 - 保持原始字段名不变，仅替换其值（后端按同名字段接收哈希值）
service.interceptors.request.use(config => {
if (config.method?.toUpperCase() === 'POST' && config.data) {
const data = typeof config.data === 'string' ? JSON.parse(config.data) : config.data;
if (data.password) data.password = hashSHA256(data.password);
if (data.idCard) data.idCard = hashSHA256(data.idCard);
config.data = JSON.stringify(data); // 若后端要求 JSON 格式
}
return config;
});
注意与后端保持完全一致
哈希结果必须和后端用同一算法、同一编码方式（如 UTF-8）、同一输入顺序得出，否则校验失败。特别注意：
- 前端哈希前是否 trim 空格？后端是否也 trim？必须同步
- 密码是否带固定 salt？如果带，salt 必须前后端硬编码一致（不建议前端存 salt，更推荐后端加盐）
- 若后端用的是 Node.js
crypto.createHash('sha256').update(str).digest('hex')，前端用CryptoJS.SHA256(str).toString(CryptoJS.enc.Hex)是等效的
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
