🔐 권한 기반 UI 접근 제어 (RBAC) 구현 과정(with React + Custom Hook)

권한 기반 접근 제어 (RBAC) 란?

진행중인 프로젝트에서 사용자에게 주어진 권한(역할) 에 따라 메뉴, 하위 메뉴, 그리고 각 리소스에 대한 접근 권한을 제어하는 기능을 구현했다.

즉, 유저는 본인의 권한 범위 내에서만 메뉴가 보여야 했고,
권한이 없는 경우엔 아예 메뉴를 볼수 없고 클릭도 불가능해야 했다.

이런 방식은 일반적으로 RBAC(Role-Based Access Control)이라고 불리는데,
사용자의 역할(Role)에 따라 어떤 리소스(페이지, 기능 등)에 접근할 수 있는지를 관리하는 방법이다.

이 글에서는 내가 실제로 구현한 방식과, 그 과정에서 중요하게 생각했던 포인트들을 정리해보려고 한다.

---

🎯 요구사항

예를 들어 A라는 유저의 권한은 다음과 같다.

• B 메뉴에 접근할 수 없음

• C 메뉴의 하위 탭 중 C-2 에만 접근 권한이 있음

• C-2 탭에서는 생성(CREATE) 권한이 없음

이 상황에서 UI는 다음과 같이 동작한다.

• ✅ B 메뉴는 로그인 시 아예 보이지 않아야 한다.

• ✅ C 메뉴 클릭 시, 자동으로 C-2 탭으로 리다이렉션 되어야 한다. (url을 직접 입력시에도 마찬가지로 동작)

• ✅ 다른 탭은 보여지되, 클릭하면 "권한이 없습니다" 알럿을 띄워야 한다.

• ✅ C-2 탭 내에서 "추가하기" 버튼 클릭 시에도 권한 체크를 하고, 알럿을 띄워야 한다.

---

🧱 구조 설계

백엔드로부터 받은 데이터 구조를 간단히 표현해보면 다음과 같다.
각 메뉴/탭/리소스를 구분할 수 있도록 menuCode를 기준으로 권한 정보를 넘겨주었다.

{
  "permissions": [
    {
      "menu": "C",
      "resources": ["READ"],
      "subMenus": [
        {
          "menu": "C-2",
          "resources": ["READ"]
        }
      ]
    }
  ]
}

---

🛠 구현

작업 전 가장 중요하게 생각했던 포인트는, 무조건 상위 파일에서 제어해야 한다는 점이었다.
개별 파일에서 접근 권한을 관리할 경우 코드가 흩어지고 다른 로직들과 겹쳐 유지보수에 어려움이 있을 수 있다.

그래서 페이지별 Layout 파일을 생성하고, 하위 탭별 라우팅을 우선 분리한 뒤
해당 레이아웃 파일에서 메뉴, 탭별 접근 제어를 관리했다.
그리고 모든 페이지에서 공통으로 사용할 수 있도록 usePermission 이라는 커스텀 훅을 생성했다.

• menuCode 상수화 + 라우터에 등록
  서버쪽에서는 각 메뉴, 하위 탭별로 고유한 '메뉴코드' 를 만들어 주었다.
  각 메뉴코드를 상수로 생성한뒤 라우터 리스트와 탭 리스트에 메뉴코드를 등록해 주었다.
• 권한 제어는 이 menuCode를 기반으로 판단한다.
• 공통 커스텀 훅으로 권한 제어

useLocation hook을 이용해 현재 위치에 따른 메뉴코드를 받아오고,
메뉴코드를 이용해 해당 메뉴에 대한 권한을 확인할 수 있었다.

 // 특정 메뉴에 대한 권한 확인
  const checkPermission = useCallback(
    (menuCode: string): PermissionCheckResult => {
      if (!userPermission || !userPermission.permissions) {
        return { hasPermission: false, permissionType: null };
      }

      // 직접 메뉴 코드 검색
      const directMenuPermission = userPermission.permissions.find(
        (permission) => permission.menu === menuCode,
      );
      	....
      }
      return { hasPermission: false, permissionType: null };
    },
    [userPermission],
  );

매번 느끼지만 이런 작업은 작업 전에 설계할 것도 많고 복잡하지만 그만큼 재밌고 보람찬 것 같다.