Environment variables loads into vue code but not working actually-CodePudding

there is an strange problem. for verifying jwt inside vue component, when I use secret key as hard-coded like below, it works fine and verifies jwt signature successfully but when I use secret key as an environment variables despite it loads inside the code and console.log() prints its value but jwt doesn't verify the token and gives an error for invalid signature.

var jwtToken = await jwt.verify(this.responseResult.token,"Xp2s5v8yVkYp3s6v9y$B&E)H@MbQeThWmZq4t7w!z%C*F-JaNdRfUjXn2r5u8x/A?D(G KbP");

console.log(process.env.VUE_APP_JWT_SIGN_KEY); // Xp2s5v8yVkYp3s6v9y$B&E)H@MbQeThWmZq4t7w!z%C*F-JaNdRfUjXn2r5u8x/A?D(G KbP
var jwtToken = await jwt.verify(this.responseResult.token, process.env.VUE_APP_JWT_SIGN_KEY);

.env in root of the project

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

package.json

"devDependencies": {
"@vue/cli-service": "^3.0.5",

error in dev-tools console:

[Global Error Handler]: Error in v-on handler (Promise/async)[object Object]: JsonWebTokenError: invalid signature

I also tried putting double quotation inside .env for value as below but gives the same error. may anyone can help please?

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

CodePudding user response：

You should wrap the value in .env inside quotes but also escape the $ with backslash, e.g.

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

There might be other special symbols that need escaping - you will discover them by trial and error.