Vue에서 새로고침을 하면 Vuex의 state는 초기화됩니다. 로그인 이후 흐름처럼 새로고침해도 유지돼야 하는 값이 있을 때 vuex-persistedstate를 사용했습니다.

vuex-persistedstate

이 라이브러리는 state를 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({
      storage: window.sessionStorage,
    }),
  ],
});

옵션을 주지 않으면 기본 저장소는 localStorage입니다. 탭을 닫으면 사라져야 하는 값이라 sessionStorage를 선택했습니다.

저장 값 암호화

저장소에 값이 그대로 보이지 않도록 암호화를 적용했습니다. 대표적인 방법은 secure-ls와 CryptoJS인데, secure-ls는 localStorage와 cookie만 지원해서 CryptoJS로 암호화한 뒤 sessionStorage에 저장하는 방식을 선택했습니다.

• 예제 코드 (CodeSandbox)
• 예제 실행 화면

덧붙임: 브라우저 저장소 암호화의 한계

옮기면서 덧붙이는 내용입니다. 브라우저 저장소의 값을 암호화하면 개발자 도구에서 값이 바로 보이지 않게 할 수는 있지만, 암호화 키가 프론트엔드 코드 안에 있기 때문에 마음먹고 분석하면 복호화할 수 있습니다.

그래서 이 방식은 "눈에 바로 보이지 않게 하는 정도"로 이해하는 것이 맞습니다. 인증 토큰이나 개인정보처럼 민감한 값은 브라우저 저장소에 두지 않고, HttpOnly 쿠키나 서버 세션처럼 스크립트에서 접근할 수 없는 방식으로 관리하는 것이 안전합니다.