저는 프론트 개발자가 아니기 때문에 전문적이 내용이 아닌 실습해본 내용입니다. 절대 이 방법이 정답이 아니며 틀린 점이 있다면 댓글로 꼭 알려주시면 감사합니다!

🔨vuex-persistedstate 설정

npm install vuex-persistedstate

설치하여 진행하였다. vuex-persistedstate를 사용하는 이유는 state는 vue에서 로그인한 유저의 정보를 가지고 있는 장소로 사용되지만 새로고침하면 vue의 프로세스 상 모두 초기화되어 버린다. 그래서 localStorage에 state에 저장되는 정보를 자동 저장하며 해당 정보를 불러올 때 localStorage와 동기화하여 자동으로 정보를 가져와 새로고침한 뒤에도 계속해서 로그인한 유저의 정보를 가지고 있을 수 있다.

import createPersistedState from 'vuex-persistedstate'

export default createStore({
  ...
  
  plugins: [
    createPersistedState()
  ]
})

npm으로 설치 후 따로 설정하는 것 없이 @/store/index.js파일에 다음 코드를 추가해준다.

만약 특정 state만 localStorage에 저장하고 싶다면 modules와 plugins 아래 createPersistendState()내에 정보를 입력해주면 되는데 해당 내용은 이번에 처리하지 않는다.

🔨실제 내 세팅

import { createStore } from 'vuex'
import createPersistedState from 'vuex-persistedstate'
import axios from '../axios/jayeon-axios'

export default createStore({
  state: {
    user: {
      id : null,
      userId: null,
      userName : null
    }
  },
  getters: {
    
  },
  mutations: {  //commit
    setUser(state, _user){
      state.user = _user;
      //localStorage.setItem('user', JSON.stringify(_user));
    }
  },
  actions: {  //dispatch
    login:({commit}, _user) =>{
      axios.post('/member/login',_user)
      .then(res => {
          console.log(res);
          const user = {
            id: res.data.id,
            userId : res.data.user_id,
            userName : res.data.user_name
          };
          commit('setUser', user);
      })
      .catch(error => {
        console.error(error);
        alert('로그인 처리 중 알수 없는 오류 발생');
      })
    }
  },
  modules: {},
  plugins: [
    createPersistedState()
  ]
})

나의 경우 다음과 같이 코드를 작성해서 사용하여 로그인 했을 경우 setUser()를 통해 유저 정보를 저장시켰다.

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'
import LoginView from '../views/LoginView.vue'
import JoinView from '../views/JoinView.vue'
import store from '@/store'
const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: '/about',
    name: 'about',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue'),
    meta: {auth : true}
  },
  {
    path: '/login',
    name: 'login',
    component: LoginView
  },
  {
    path: '/join',
    name: 'join',
    component: JoinView
  }
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

router.beforeEach(async (to, from, next)=>{
  const userId = store.state.user.userId;
  console.log(userId);
  if(to.matched.some(r=>r.meta.auth) && userId == null){
    alert('로그인이 필요한 페이지입니다!');
    next('/login')
  }else{
    next()
  }
})

router의 경우 beforEach를 페이지를 이동하기 전 auth가 true인 페이지는 로그인 유저의 정보가 있는지 체크하고 넘어가도록 했다.

다음과 같이 로그인 전에는 비어있는 상태이고

로그인이 필요한 About 페이지를 눌렀을 경우 로그인이 필요하다는 알림창을 받는다.

정상 로그인처리가 진행되면 다음과 같이 vuex라는 key로 데이터가 저장되고

state에도 정보가 동일하게 저장된것을 확인할 수 있다. 그럼 이제 새로고침을 하여 state의 정보를 날려버리자.

개발자 도구의 vue 탭의 경우 크롬의 확장자를 설치하면 사용할 수 있다.

새로고침으로 인해 vue의 state 정보가 모두 날라갔다.

하지만 우리는 about 페이지에 정상 접근을 할 수 있다.

그 이유는 새로고침을 해도 local storage에는 우리가 로그인 했을 때 저장했던 내용이 그대로 남아있고 설치한 라이브러리가 해당 내용으로 state 값을 동기화하여 반환해주기 때문이다. 하지만 이 또한 프론트에서 조작이 가능한 값이므로 백엔드에서 유효성 검사를 통해 session에 저장된 유저의 정보랑 비교한 후 실행해주는게 필요할거 같다. 혹은 프론트는 백엔드에 영향을 주지 않게 설계하던지!

local storage로 유저의 정보를 저장할 경우 브라우저를 껐다 켜도 세션처럼 정보가 날라가지 않고 그대로 로그인처리되어 있다. 해당 문제는 어차피 token을 통해 유효성 검사를 하고 있기 때문에 토큰이 만료되었다면 자동 로그인처리를 하도록 유도하기 때문에 문제가 되지않을거 같았다.