redux 사용 시, 발급 받은 JWT 토큰 localstorage에 저장하기

Issue

회사 프로젝트 도중, 사용자의 인증/인가를 통해 서비스를 구축하기 위해 서버로부터 발급 받은 JWT 토큰을 어디에 저장해야 될지 많은 고민이 있었다.

 

처음에는 store에 발급 받은 JWT 토큰을 저장해주는 방식으로 진행하였는데, JWT 토큰이 필요한 상황마다 매번 store에 저장되어 있는 값을 useSelector()를 통해 가져오는 것은 전체 코드를 번잡하게 만드는 문제가 있었다.

 

보안상의 이슈를 방지하기 위해 백엔드 측과 소통하여 refresh token을 사용하는 방식이 가장 좋았겠지만 당시 백엔드 개발자의 상황이 여의치 않았기 때문에 클라이언트 측에서 할 수 있는 최선의 방법을 선택하기로 하였다.

 

이에 발급 받은 JWT 토큰을 localstorage에 저장하는 방식을 프로젝트에 접목하기로 하였다.

 

Code

우선, 로그인하여 발급 받은 JWT 토큰을 store에 token 이라는 키 값에 저장하여 주었다.

const initialState = {

  ( ... )
  
  token: ""	
};

 

token 키 값이 변경되어 상태 트리가 변경이 되면, 이를 감지하기 위해 index.js에서 store 인스턴스의 getState()와 subscribe()을 다음과 같이 사용하였다.

( ... )
import { loadState, saveState } from "./localStorage";

const sagaMiddleware = createSagaMiddleware();

const persistedState = loadState();

const store = createStore(
  rootReducer,
  composeWithDevTools(applyMiddleware(sagaMiddleware))
);

store.subscribe(() => {
  saveState({ ...persistedState, access_token: store.getState().auth.token });
});

( ... )

 

subscribe() 전달 인자에 상태 트리가 바뀌게 될 때마다 호출할 콜백 함수를 넣어주었고, 해당 콜백 함수 내에서 localstorage에 JWT 토큰을 저장해주는 역할을 하는 saveState() 유틸 함수를 호출하였다.

 

saveState 유틸 함수는 access_token을 키 값으로 갖는 익명 객체를 인자로 받는데,  JWT 토큰이 재발급될 때와 같이 확장성을 고려하여 또 다른 유틸 함수인 loadState()가 반환 한 이전 토큰 정보를 스프레드 문법을 사용하여 access_token 값을 매번 재할당해주었다.

 

그리고 loadsState()와 saveState() 유틸 함수는 다음과 같이 정의하였다.

export const loadState = () => {
  try {
    const serializedState = localStorage.getItem("state");
    if (serializedState === null) {
      return undefined;
    }
    return JSON.parse(serializedState);
  } catch (error) {
    return undefined;
  }
};

export const saveState = state => {
  try {
    const serializedState = JSON.stringify(state);
    localStorage.setItem("state", serializedState);
  } catch (error) {
    // Ignore write errors.
  }
};

 

LocalStorage의 getItem()과 setItem()을 사용하여 serialize 한 JWT 토큰 정보를 저장해주도록 로직을 구성하였고, 사용자가 로그인을 할 때마다 발급 받은 JWT 토큰을 localstorage에 저장할 수 있었다.

 

 

Reference

https://lunit.gitbook.io/redux-in-korean/api/store

Store - Redux