[javascript] Redux와 JSON Web Token(JWT)의 연동 방법은?

22 Nov 2023

javascript

소개

Redux는 JavaScript 앱에서 상태(state)를 관리하기 위한 패턴 및 라이브러리입니다. JWT는 인증을 위한 토큰 기반의 인증 방법론입니다. 이 블로그 포스트에서는 Redux와 JWT를 함께 사용하는 방법에 대해 알아보겠습니다.

JWT 소개

JWT는 JSON Web Token의 약어로, 클라이언트와 서버 간의 정보를 안전하게 전송하기 위한 방법입니다. JWT는 토큰으로 구성되어 있으며, 토큰에는 클라이언트를 식별하는 정보와 유효성 검증을 위한 서명(signature)이 포함됩니다.

Redux와 JWT 연동 방법

Redux와 JWT를 연동하려면 다음과 같은 단계를 따라야 합니다:

1. 로그인 액션 생성하기

먼저, 로그인 액션을 생성해야 합니다. 로그인 액션은 사용자가 로그인할 때 JWT를 받아오는 역할을 합니다. 이 액션에는 서버로부터 받은 JWT를 저장하는 로직을 추가해야 합니다.

예시 코드:

import { login } from './actions';

const userLogin = (username, password) => {
  // 서버로부터 JWT를 받아온다고 가정
  const jwt = 'example-jwt-token';

  return dispatch => {
    dispatch(login(jwt));
  };
};

2. 상태 관리하기

Redux는 상태 관리를 위한 패턴이므로, JWT를 상태로 관리해야 합니다. 상태에는 로그인 상태와 함께 JWT가 저장됩니다.

예시 코드:

import { createStore } from 'redux';
import { loginReducer } from './reducers';

const initialState = {
  isLoggedIn: false,
  jwt: null,
};

const store = createStore(loginReducer, initialState);

3. Redux 미들웨어 설정하기

Redux 미들웨어는 액션과 상태 사이에서 작업을 수행하는 기능입니다. JWT를 관리하기 위해 Redux 미들웨어를 설정해야 합니다. 예를 들어, JWT를 HTTP 요청 헤더에 실어 보내는 경우 미들웨어를 사용하여 요청을 가로챌 수 있습니다.

예시 코드:

import axios from 'axios';
import { applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import { JWT_MIDDLEWARE_ACTION } from './constants';

const jwtMiddleware = store => next => action => {
  if (action.type === JWT_MIDDLEWARE_ACTION) {
    const { jwt } = store.getState();

    // HTTP 요청 헤더에 JWT를 실어 보내는 로직
    axios.defaults.headers.common['Authorization'] = `Bearer ${jwt}`;
  }

  return next(action);
};

const store = createStore(loginReducer, initialState, applyMiddleware(thunk, jwtMiddleware));

마무리

이렇게 Redux와 JWT를 함께 사용하는 방법에 대해 알아보았습니다. 로그인 액션을 통해 JWT를 받아오고, 상태 관리를 통해 JWT를 저장하며, Redux 미들웨어를 설정하여 JWT를 활용할 수 있습니다. 이를 통해 보안을 강화하고, 사용자 인증에 대한 로직을 효율적으로 관리할 수 있습니다.