👍 Vuex를 이용한 로그인 관리

👍 Vuex를 이용한 로그인 관리

이번에는 Vuex와 JWT를 이용하여 Token을 관리하고자 한다.
사실 현업에서는 세션쿠키를 더 쓰는걸로 알고 있지만, Token으로 구현해보았다,

순서는 userStore생성 => Vuex에 Token 저장 => 새로고침 할 경우 토큰 저장

1️⃣userStore생성

처음에는 store > modules 폴더 밑에 userStore 를 생성한다

//userStore.js
const userStore = {
    namespaced: true,
    state: {},
    getters: {},
    mutations: {},
    actions: {},
};
export default userStore;

* 폴더 위치는 아래 사진에 첨부한다.

2️⃣Vuex에 Token 저장

저 같은 경우 로그인 성공했을 경우 Vuex의 mutations 활용하여 토큰을 저장하였다.
코드는 userStore.js의 mutations 안에 로직을 넣는다. payload부분은 파라미터로 보통 활용되고
state는 상태관리 데이터로 활용됩니다. MU_TOKEN을 활용하여 accessToken, refreshToken을 저장한다.

//userStore.js
const userStore = {
    namespaced: true,
    state: {},
    getters: {},
    mutations: {
        MU_TOKEN: (state, payload) => {
            state.accessToken = payload.ACCESS_TOKEN;
            state.refreshToken = payload.REFRESH_TOKEN;
        },
    },
    actions: {},
};
export default userStore;

3️⃣새로고침 할 경우 토큰 저장

Vuex 같은 경우 새로고침할 경우 Vuex에 저장된 데이터가 날아간다. 그래서 새로고침 할때마다, Vuex의 값을 넣어줘야햐는데
나 같은 경우는 localStorage에 저장한 후에 새로고침 할때 localStorage에서 값을 확인하여 Vuex에 값을 넣어주었다.
그러기 위해서는 처음에는 localStorage에서 값을 가져오는 함수가 필요하다.

token 관리하는 함수

getAccessToken,getRefreshToken을 활용하여 값을 추출한다.

// utils/token.js
const getAccessToken = () => {
    return localStorage.getItem('accessToken');
};
const getRefreshToken = () => {
    return localStorage.getItem('refreshToken');
};
export {
    getAccessToken,
    getRefreshToken,
};

userStore.js에서 값을 세팅

getAccessToken,getRefreshToken를 import하여 state에 세팅해준다.

//userStore.js
import {getAccessToken,getRefreshToken} from 'root/utils/token';
const userStore = {
    namespaced: true,
    state: {
        accessToken: getAccessToken(),
        refreshToken: getRefreshToken(),
    },
    getters: {},
    mutations: {
        MU_TOKEN: (state, payload) => {
            state.accessToken = payload.ACCESS_TOKEN;
            state.refreshToken = payload.REFRESH_TOKEN;
        },
    },
    actions: {},
};
export default userStore;