페이지 권한, 메뉴 권한, 컴포넌트 권한의 동작을 테스트할 수 있습니다
로그인 상태: {{ userStore.isLoggedIn ? "로그인됨" : "로그인 안됨" }}
사용자: {{ userStore.user.name }} ({{ userStore.user.userId }})
참고: 로그인이 필요합니다. 로그인 후 권한 데이터가 자동으로 로드됩니다.
현재 사용자의 권한 상태와 페이지 권한 체크를 확인합니다.
현재 경로: {{ $route.path }}
로그인 상태: {{ userStore.isLoggedIn ? "로그인됨" : "로그인 안됨" }}
사용자: {{ userStore.user.name }} ({{ userStore.user.userId }})
페이지 권한({{ $route.path }}): {{ permission.hasPagePermission($route.path) ? "있음" : "없음" }}
테스트 페이지그룹 권한(PG01): {{ permission.hasPageGroupPermission("PG01") ? "있음" : "없음" }}
각 컴포넌트 권한에 따라 버튼이 표시되거나 숨겨지는 것을 확인합니다.
페이지그룹 권한에 따라 메뉴가 표시되거나 숨겨지는 것을 확인합니다.
다양한 권한 체크 함수들의 동작을 테스트합니다.
hasPagePermission('/admin/codes')
{{ permission.hasPagePermission("/admin/codes") ? "true" : "false" }}
hasPageGroupPermission('PG01')
{{ permission.hasPageGroupPermission("PG01") ? "true" : "false" }}
다양한 페이지 경로에 대한 권한을 테스트합니다. 권한이 없으면 홈으로 리다이렉트됩니다.
참고: 실제로는 권한이 없는 경로에 접근하면 자동으로
홈으로 리다이렉트됩니다. 이 페이지는
/test/permission-test 경로로, 페이지 권한이 있어야
접근할 수 있습니다.
버튼 텍스트는 권한 코드에서 자동으로 가져옵니다.
로그인 필요: 이 페이지를 사용하려면 먼저 로그인해야 합니다. 로그인 시 가데이터 권한이 자동으로 로드됩니다.
페이지 권한: 페이지 라우터 접근 권한을 제어합니다. 권한이 없으면 홈으로 리다이렉트됩니다.
페이지그룹 권한: 페이지그룹 표시 여부를 제어합니다. 권한이 없으면 페이지그룹이 숨겨집니다.
컴포넌트 권한: 버튼 등 UI 컴포넌트의 표시 여부를 제어합니다. 권한이 없으면 컴포넌트가 렌더링되지 않습니다.
PermissionButton 컴포넌트: 권한 체크와 클릭 이벤트를 자동으로 처리하는 재사용 가능한 버튼 컴포넌트입니다. buttonCode prop으로 권한을 체크하고, 권한이 있을 때만 버튼이 표시됩니다.
백엔드 연동: 나중에 백엔드 API가 준비되면
stores/permissions.ts의
fetchPermissions 함수를 수정하여 실제 API를 호출하도록
변경할 수 있습니다.