[Vue] Vuex 새로고침 및 암호화

vuex-persistedstate Crpyto 활용
vuex sessionStorage 암호화

Vue 새로고침

Vue에서 새로고침을 하게되면 state는 증발하게 된다.
위와 같은 문제를 해결하기 위해선 vuex-persistedstate를 활용하여야 하는데

해당 라이브러리는 sessionStorage, localStorage, cookie에 값을 저장하여
state가 없을경우 브라우저 저장소에서 값을 꺼내와 셋팅을 해주는 편리한 라이브러리이다.

npm install vuex-persistedstate

import Vue from vue;
import Vuex from vuex'
import createPersistedState from 'vuex-persistedstate';
import modules from './modules';

Vue.use(Vuex);

const store = new Vuex.Store({
  modules,
  plugins: [
    createPersistedState(); // createPersistedState에 디폴트 설정으로는 localStorage이다.
    
    createPersistedState({
      storage: window.sessionStorage // store를 session storage 에 유지
    })
    
  ]
})

암호화

암호화를 설정하는 방법으로는 secure-ls와 CryptoJs 등등 여러개가 있지만 이 두가지가 대표적인거같다.

secure-ls는 로컬스토리지와 쿠키만 사용이 가능하여
CryptoJs를 활용하여 세션스토리지에 담는 방식을 선택하였다.

https://codesandbox.io/p/sandbox/vuex-persistedstate-with-secure-ls-encrypted-data-forked-3gwz2d?file=%2Findex.js%3A3%2C35-3%2C54

https://3gwz2d.csb.app/