useRoleManagement 후크를 사용하여 다양한 환경에서 동적 역할 이름 처리(2부)

이 시리즈의 첫 번째 부분에서는 useRoleManagement 후크를 사용하여 React에서 역할 기반 액세스 제어를 구현하는 기초를 탐색했습니다. 아직 읽어보지 않으셨다면 여기에서 확인하실 수 있습니다
React에서 역할 기반 액세스 제어 구현: useRoleManagement Hook에 대한 심층 분석

이번 두 번째 부분에서는 스테이징, 프로덕션 등 다양한 환경에 따라 동적 역할 이름을 관리하는 방법에 대해 자세히 살펴보겠습니다. 이는 다양한 개발 단계에서 일관되고 안전한 역할 관리를 유지하는 데 중요합니다.

개요

애플리케이션을 개발할 때 다양한 환경에 대해 서로 다른 역할 이름이나 권한 구성을 갖는 것이 일반적입니다. 예를 들어 개발에서는 테스트 또는 모의 역할 이름을 사용하고 프로덕션 환경에서는 실제 프로덕션에 준비된 역할 이름을 사용할 수 있습니다. 이러한 동적 역할 이름을 올바르게 처리하면 애플리케이션이 라이프사이클의 여러 단계에서 일관되고 안전하게 작동할 수 있습니다.

환경별 역할 구성

역할 이름을 동적으로 관리하기 위해 환경 변수를 활용할 수 있습니다. 이러한 변수를 사용하면 다양한 환경에 대해 다양한 역할 키를 정의한 다음 적절한 권한 구성을 로드하는 데 사용할 수 있습니다.

이를 달성하는 방법은 다음과 같습니다.

1. 환경 변수 정의

.env.development 및 .env.production 파일에서 각 환경에 대한 역할 키를 지정합니다. 예:

• .env.development

VITE_ROLE_KEYS_MANAGER=Manager_Test
VITE_ROLE_KEYS_USER=USER_Test
VITE_ROLE_KEYS_ADMIN=Admin_Test

• .env.production

VITE_ROLE_KEYS_MANAGER=Prod_Manager
VITE_ROLE_KEYS_USER=Prod_USER
VITE_ROLE_KEYS_ADMIN=Prod_Admin

이 설정을 통해 애플리케이션이 실행 중인 환경에 따라 적절한 역할 이름을 사용할 수 있습니다.

2. 권한 개체 업데이트

권한 개체를 동적으로 정의하려면 이러한 환경 변수를 사용하세요. 권한 개체는 역할 키를 각 역할의 특정 권한에 매핑합니다.

const permissions: Record<string, UserPermissions> = {
  [import.meta.env.VITE_ROLE_KEYS_MANAGER]: {
    partners: { add: false, view: false, edit: false, deleteRow: true },
    // ... other permissions
  },
  [import.meta.env.VITE_ROLE_KEYS_USER]: {
    partners: { add: false, view: false, edit: false, deleteRow: false },
    // ... other permissions
  },

  [import.meta.env.VITE_ROLE_KEYS_ADMIN]: {
    partners: { add: true, view: true, edit: true, deleteRow: true },
    // ... other permissions
  },
};

import.meta.env 구문을 사용하면 .env 파일에 정의된 환경 변수에 액세스할 수 있습니다.

3. useRoleManagement 후크 사용

이 시리즈의 첫 번째 부분에서는 useRoleManagement 후크를 사용하여 React의 역할 기반 액세스 제어의 기초를 살펴보았습니다. 아직 읽어보지 않으셨다면 여기에서 확인하실 수 있습니다.

useRoleManagement 후크는 디코딩된 JWT 토큰에서 사용자 역할을 추출하고 환경별 역할 키를 사용하여 이를 권한에 매핑한 다음 관련 권한을 반환합니다.

export function useRoleManagement() {
  const { pathname } = useLocation();

  const token = localStorage.getItem('token');

  let decodedToken: Realm | null = null;

  try {
    if (token) {
      decodedToken = jwtDecode<Realm>(token);
    }
  } catch (error) {
    console.error('Invalid token:', error);
  }

  const roles = decodedToken?.realm_access?.roles ?? [];

  const roleExists = ifRoleExists(roles);

  const rolePermissions = getPermissions(
    roleExists,
    pathname !== '/' ? pathname : '/partners',
  );

  if (!rolePermissions) {
    return {};
  }

  const {
    add,
    view,
    edit,
    deleteRow,
    confirm,
    include,
  } = rolePermissions as Permissions;

  return {
    add,
    view,
    edit,
    deleteRow,
    confirm,
    include,
  };
}

결론

환경 변수를 통해 역할 이름을 동적으로 관리하면 애플리케이션의 역할 기반 액세스 제어가 다양한 환경에서 일관되게 작동하도록 할 수 있습니다. 이 접근 방식은 유연성을 제공하고 개발 구성과 프로덕션 구성을 명확하게 구분하는 데 도움이 됩니다.

위 내용은 useRoleManagement 후크를 사용하여 다양한 환경에서 동적 역할 이름 처리(2부)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!