Vue中使用环境变量加载JWT密钥时签名验证失败如何解决？

问题根源 #

你的问题是.env文件解析时特殊字符被转义/插值导致实际加载的密钥和硬编码值不一致，console.log肉眼看起来相同不代表字符串完全相等，常见诱因有两个：

1. 你给出的.env配置行开头有多余前导空格，会被自动加到环境变量值里
2. 密钥中的$符号被dotenv默认识别为环境变量插值标记，会被解析替换，加双引号也无法避免该行为

解决步骤 #

1. 先添加代码确认两个值是否完全相等，不要仅依赖肉眼看打印结果：

const hardcodeKey = "Xp2s5v8yVkYp3s6v9y$B&E)H@MbQeThWmZq4t7w!z%C*F-JaNdRfUjXn2r5u8x/A?D(G+KbP"
// 输出false就代表两个值实际不一致，验证我们的判断
console.log(hardcodeKey === process.env.VUE_APP_JWT_SIGN_KEY)
// 也可以打印长度对比，长度不同肯定值不一样
console.log('硬编码密钥长度：', hardcodeKey.length)
console.log('环境变量密钥长度：', process.env.VUE_APP_JWT_SIGN_KEY.length)

2. 修改.env配置，二选一即可：

方案A：转义$符号+去掉前导空格

VUE_APP_JWT_SIGN_KEY=Xp2s5v8yVkYp3s6v9y\$B&E)H@MbQeThWmZq4t7w!z%C*F-JaNdRfUjXn2r5u8x/A?D(G+KbP

方案B：用单引号包裹值（单引号内的内容dotenv不会做插值解析）

VUE_APP_JWT_SIGN_KEY='Xp2s5v8yVkYp3s6v9y$B&E)H@MbQeThWmZq4t7w!z%C*F-JaNdRfUjXn2r5u8x/A?D(G+KbP'

3. 修改完.env文件后必须重启Vue开发服务，.env的修改不会被热更新加载，只有重启服务才会生效。

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