[Vue.js] Vuex , store로 상태 관리하기( JWT, token 저장 )

상태관리를 위한 store를 사용하기 위해선 먼저 Vuex를 설치 해야한다.

 

* Vuex 설치

npm install vuex --save

 

npm을 사용해서 vuex를 설치해주면 store.js를 생성해서 상태 관리를 하면 된다.

store는 어떤 데이터를 컴포넌트끼리 쉽게 공유하기 위해서 사용하게 되는데, 이런 목적으로 로그인 시 Java web token(jwt)를 store를 통해 관리하게 된다.  store에서 사용할 수 있는 기능은 크게 state / getters / mutations / action이 있다.

---

- state(상태) : 관리하고자 하는 상태

 

- getters : 말 그대로 state값들을 리턴하기 위한 getter 로직

 

- mutations (변이):  state를 변화시키는로직, mutations의 핸들러를 호출하기 위해서는 직접 호출을 할 수 없고 commit을 사용해서 호출해야 한다. mutations를 비동기로 처리하게 되면 어떤 컴포넌트에서 동작했는지 파악하기가 어려워지기 때문에 이 비동기 로직은 actions에서 처리한다.

 

- actions : mutations를 호출하는 서비스 로직으로 dispatch를 사용해서 호출한다.

---

* store.js

import Vuex from "vuex";
import Vue from 'vue';

Vue.use(Vuex);

// store 생성
export const store = new Vuex.Store({
    state: {
        token: null,
    },
    getters: {
        isLogin(state){
            return state.token == null ? false : true ;
        }
    },
    mutations: {  // commit 으로 부를 수 있다.
        setToken(state, _token){
            state.token = _token;
        }
    },
    actions: { // dispatch 로 부를 수 있다.
         setToken:({commit} , _token) => {
            commit('setToken' , _token);
        }
    }
})

 

로그인을 통해 응답받은 token 값을 state에 저장 하기 위해 mutations와 actions이 필요하다.

AdminLogin.vue 에서 dispatch를 사용해 actions를 호출하고 actions 내부에서 mutations 를 호출하게 된다.

 

 

 

* AdminLogin.vue

methods: {
    async loginAdmin() {
      try {
        const token = await this.adminService.loginAdmin(this.adminObj);
        this.$store.dispatch('setToken', token)
      } catch (error) {
        alert('로그인에 실패했습니다.');
        location.reload();
      }
    }
  }

 

AdminLogin.vue 에서 this.$store.dispatch( 'setToken', token ) 로 actions 을 호출하고 인자값 token 을 설정해준다.

그리고 나면 actions 에서 mutations 의 setToken 을 호출해 state.token 상태를 변경하게 된다.

저장된 token은 getters를 통해 null인지 아닌지 판별되어 boolean값으로 리턴된다. 해당 getters를 이용해 토큰값의 유무를 파악 할 수 있다.

 

또한 해당 token에 대한 정보를 localStorage 에 저장해서 로그인 처리를 마무리 해줘야하는데 이건 새로고침시 store값이 초기화 되는 현상으로 인해 다른 방식으로 처리할 것이다. 이건 다음 포스팅에서 정리!