[Vuejs]-How to prevent vuex state from resetting while using Secure-ls?

by

3👍

✅

As https://www.npmjs.com/package/secure-ls#api-documentation which needs an encryptionSecret, so if we forget to set this option, then in every refresh your vuex data will be discarded. by the way if you want to use secure-ls, you should pass to it an object like below:

{
    encodingType: "aes",
    encryptionSecret: "along and specific key here",
    isCompression: true
  }

You can use https://www.npmjs.com/package/simple-browser-fingerprint to have a good key per browser, so the full answer can be like below for production mode only :

//securityOptions.ts";
import simpleBrowserFingerprint from "simple-browser-fingerprint";
const securityOptions = {
  encodingType: "",
  encryptionSecret: undefined,
  isCompression: false
};

if (process.env.NODE_ENV === "production")
  Object.assign(securityOptions, {
    encodingType: "aes",
    encryptionSecret: simpleBrowserFingerprint(),
    isCompression: true
  });
export default securityOptions;

//store.js
import securityOptions from "@/store/securityOptions";
const ls = new SecureLS(securityOptions);

Note: please Consider that this not a golden key to your problem, but have sth for security is better than not to have anything.

👤SeyyedKhandon

Leave a comment