Redux Thunk를 이용한 권한 관리 로직 구현하기

18 Oct 2023

redux

권한 관리는 웹 애플리케이션에서 중요한 부분입니다. Redux Thunk를 사용하여 권한 관리 로직을 구현하는 방법에 대해 알아보겠습니다.

Redux Thunk란?

Redux Thunk는 Redux의 미들웨어 라이브러리로, 액션 크리에이터에서 비동기 작업을 처리할 수 있도록 도와줍니다. 이를 활용하여 권한 관리 로직을 비동기적으로 다룰 수 있습니다.

권한 상태 관리하기

먼저, 권한 상태를 저장할 Redux store를 생성합니다. 이를 위해 새로운 리듀서를 만들어야 합니다. 다음은 예시입니다:

// authReducer.js

const initialState = {
  isAuthenticated: false,
  permissions: [],
};

const authReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'LOGIN_SUCCESS':
      return {
        ...state,
        isAuthenticated: true,
        permissions: action.payload.permissions,
      };
    case 'LOGOUT_SUCCESS':
      return {
        ...state,
        isAuthenticated: false,
        permissions: [],
      };
    default:
      return state;
  }
};

export default authReducer;

위의 예시에서는 로그인 성공 시 LOGIN_SUCCESS 액션을, 로그아웃 성공 시 LOGOUT_SUCCESS 액션을 dispatch합니다. 액션 처리 함수는 이전에 정의한 상태를 수정하여 권한 상태를 변경합니다.

로그인 처리하기

로그인 처리를 위해 Redux Thunk를 사용합니다. Redux Thunk를 통해 액션 처리 함수 안에서 비동기 작업을 수행할 수 있습니다.

다음은 로그인 처리 로직을 담은 액션 크리에이터와 Thunk 함수의 예시입니다:

// authActions.js

export const loginSuccess = (permissions) => ({
  type: 'LOGIN_SUCCESS',
  payload: {
    permissions,
  },
});

export const login = (username, password) => {
  return async (dispatch) => {
    try {
      // 로그인 API 호출
      const response = await api.login(username, password);
      
      // 로그인 성공 시 권한을 받아옴
      const permissions = response.data.permissions;
      
      // 권한을 Redux 상태에 저장
      dispatch(loginSuccess(permissions));
      
      // 성공적으로 로그인되었음을 알리는 메시지 표시
      toast.success('로그인 되었습니다.');
    } catch (error) {
      // 로그인 실패 시 에러 처리
      toast.error('로그인에 실패했습니다.');
    }
  };
};

위 예시에서는 login 액션 크리에이터가 비동기적으로 작업을 처리하고 있습니다. 액션 처리 함수 내에서 API를 호출하여 로그인하고, 권한을 받아온 뒤 이를 Redux 상태에 저장합니다. 성공적으로 로그인된 경우, 로그인 완료 메시지를 사용자에게 보여줍니다. 로그인 실패한 경우에는 에러 메시지를 보여줍니다.

로그아웃 처리하기

로그아웃 처리도 비동기적으로 처리해야 합니다. 이를 위해 로그아웃 함수에서도 Thunk를 사용합니다.

다음은 로그아웃 처리 로직을 담은 액션 크리에이터와 Thunk 함수의 예시입니다:

// authActions.js

export const logoutSuccess = () => ({
  type: 'LOGOUT_SUCCESS',
});

export const logout = () => {
  return async (dispatch) => {
    try {
      // 로그아웃 API 호출
      await api.logout();
      
      // 로그아웃 성공 시 Redux 상태 업데이트
      dispatch(logoutSuccess());
      
      // 성공적으로 로그아웃되었음을 알리는 메시지 표시
      toast.success('로그아웃 되었습니다.');
    } catch (error) {
      // 로그아웃 실패 시 에러 처리
      toast.error('로그아웃에 실패했습니다.');
    }
  };
};

위의 예시에서는 logout 액션 크리에이터가 비동기적으로 작업을 처리하고 있습니다. 액션 처리 함수 내에서 로그아웃 API를 호출하고, 로그아웃 성공 시 Redux 상태를 업데이트합니다. 성공적으로 로그아웃된 경우, 로그아웃 완료 메시지를 사용자에게 보여줍니다. 로그아웃 실패한 경우에는 에러 메시지를 보여줍니다.

결론

Redux Thunk를 사용하여 권한 관리 로직을 구현하는 방법에 대해 알아보았습니다. 비동기 작업을 처리하기 위해 Redux Thunk를 사용하면 권한 관리와 같은 복잡한 작업을 쉽게 처리할 수 있습니다. 이러한 방법을 활용하여 웹 애플리케이션의 권한 관리를 간편하게 구현해보세요.

더 자세한 내용은 Redux Thunk 공식 문서를 참고하시기 바랍니다.

참고 문서: Redux Thunk 공식 문서