CryptoJS加密内容作为URL路由跳转后解密返回乱码问题排查

核心问题定位 #

你遇到的乱码本质是加密字符串在URL传输过程中被篡改，本地加解密正常说明算法本身逻辑没问题，问题出在路由传参环节和加解密配置一致性上。 #

分步修复方案 #

1. 先验证参数传输是否正常 #

分别在两个页面打印加密字符串，确认值是否完全一致：

• 页面1打印encryptedURL的原始输出
• 页面2打印拿到的id值
  如果两者不一致，优先解决URL编码问题；如果一致，再排查加解密配置问题。

2. 修复路由拼接与URL编码问题 #

你当前的Link写法存在语法错误，且缺少URL安全处理，修改为如下代码：

// 页面1：加密后做URL编码再拼接路由
const encryptedStr = encrypt(JSON.stringify(objectInfo))
const encodedParam = encodeURIComponent(encryptedStr)
<Link to={`/page2/${encodedParam}`} />

// 页面2：拿到参数后先解码再解密
const { id } = useParams()
const decodedParam = decodeURIComponent(id)
console.log('json', decrypt(decodedParam))

3. 检查加解密配置一致性 #

确保两个页面的以下配置完全相同：

• ALGORITHM必须固定为aes-256-ctr，无拼写错误
• SECRET_KEY必须完全一致，长度为32位，编码格式统一（比如都是utf8编码）
• IV必须和加密时使用的完全一致，长度为16位：如果你的IV是加密时随机生成的，需要把IV和密文一起传输，示例修改如下：

// 加密逻辑调整，拼接IV和密文
export function encrypt(text) {
  const iv = crypto.randomBytes(16) // 随机生成16位IV
  const cipher = crypto.createCipheriv(ALGORITHM, SECRET_KEY, iv)
  const encrypted = cipher.update(text, 'utf8', 'hex') + cipher.final('hex')
  // IV转hex后和密文拼接，用分隔符区分
  return `${iv.toString('hex')}:${encrypted}`
}

// 解密逻辑调整，拆分出IV再解密
export function decrypt(encryptedStr) {
  const [ivHex, hash] = encryptedStr.split(':')
  const iv = Buffer.from(ivHex, 'hex')
  const decipher = crypto.createDecipheriv(ALGORITHM, SECRET_KEY, iv)
  const decrypted = decipher.update(hash, 'hex', 'utf8') + decipher.final('utf8')
  return decrypted
}

内容的提问来源于stack exchange，提问作者james wisley