[Vue-DRF] 새로고침 시 로그인 유지하기 (vuex-persistedstate)

JinUk Lee·2022년 12월 26일
0

이전 포스팅에서 vuex로 store를 다루는 법에 대해 배웠지만 이것을 적용시켜보면

새로고침 시 store가 날아가는 것을 볼 수 있다.

우리는 store로 로그인을 관리하므로 이것이 날아간다는 것은 새로고침을 하면 로그인이 풀려버리는 것인데 이를 유지하기 위해서는 vuex-persistedstate 라이브러리를 사용해야 한다.

해당 라이브러리는 vuex를 저장해준다.

저장해준다는 뜻은 새로고침을 해도 저장된 데이터를 가져와서 사용할 수 있다는 것이다.

vuex-persistedstate 가 지원하는 저장소는 3가지로 localstroage, cookie, secure-ls 이다.

로컬이나 쿠키는 알겠지만 secure-ls 는 좀 낯선데, 찾아보니 데이터를 암호화하여 localstroage 에 저장하는 라이브러리이다.

프로젝트에서는 개발 시간이 짧은 탓에 디폴트값인 로컬스토리지를 사용하였다. (디폴트값이 로컬스토리지이다.)

1. 설치하기

npm i vuex-persistedstate --force

2. 적용 코드

import { createStore } from 'vuex'
import loginStore from './modules/loginStore'
import refreshtoken from './modules/refreshtoken'
import createPersistedState from 'vuex-persistedstate'
export default createStore({
  state: {
  },
  getters: {
  },
  mutations: {
  },
  actions: {
  },
  modules: {
    loginStore, refreshtoken
  },
  plugins: [
    createPersistedState({
      paths: ['loginStore']
    })
  ]
})

기존 코드에서 plugins 만 추가해주면 된다.

결과

개발자도구 - 로컬스토리지에서 vuex에 관리하는 store가 들어와있는 것을 볼 수 있다.

vue 에서 호출할 때는 두가지 방식으로 호출할 수 있다.

# state에서 꺼내오기

import loginStore from '../store/index'
  data () {
    return {
      userInfo: loginStore.state.loginStore.userInfo,
    }
  },
  
# localstroage에서 직접 꺼내오기

  const userInfo = localStorage.getItem('userInfo') // 토큰을 저장함

더 편한 방식을 사용하면 될 것 같다.

profile
개발자 지망생

0개의 댓글