574 lines
21 KiB
Vue
574 lines
21 KiB
Vue
<template>
|
|
<div
|
|
class="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 py-12 px-4"
|
|
>
|
|
<div class="max-w-6xl mx-auto">
|
|
<!-- 페이지 헤더 -->
|
|
<div class="text-center mb-8">
|
|
<h1 class="text-4xl font-bold text-gray-900 mb-4">
|
|
권한 시스템 테스트
|
|
</h1>
|
|
<p class="text-xl text-gray-600">
|
|
페이지 권한, 메뉴 권한, 컴포넌트 권한의 동작을 테스트할 수 있습니다
|
|
</p>
|
|
</div>
|
|
|
|
<!-- 현재 상태 표시 -->
|
|
<div class="bg-gray-100 p-4 rounded-lg mb-6">
|
|
<h2 class="text-xl font-semibold mb-2">현재 상태</h2>
|
|
<div class="space-y-2">
|
|
<p>
|
|
<strong>로그인 상태:</strong>
|
|
<span
|
|
:class="userStore.isLoggedIn ? 'text-green-600' : 'text-red-600'"
|
|
>
|
|
{{ userStore.isLoggedIn ? "로그인됨" : "로그인 안됨" }}
|
|
</span>
|
|
</p>
|
|
<p v-if="userStore.user">
|
|
<strong>사용자:</strong> {{ userStore.user.name }} ({{
|
|
userStore.user.userId
|
|
}})
|
|
</p>
|
|
<p v-if="!userStore.isLoggedIn" class="text-orange-600 text-sm">
|
|
<strong>참고:</strong> 로그인이 필요합니다. 로그인 후 권한 데이터가
|
|
자동으로 로드됩니다.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 권한 테스트 섹션 -->
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8 mb-8">
|
|
<!-- 좌측: 권한 상태 및 체크 -->
|
|
<div class="lg:col-span-2 space-y-6">
|
|
<!-- 현재 권한 상태 -->
|
|
<div class="bg-white rounded-lg shadow-md p-6">
|
|
<div class="flex items-center mb-4">
|
|
<div
|
|
class="w-10 h-10 bg-blue-500 rounded-full flex items-center justify-center mr-3"
|
|
>
|
|
<span class="text-white font-bold text-sm">1</span>
|
|
</div>
|
|
<h3 class="text-xl font-semibold text-gray-900">
|
|
현재 권한 상태
|
|
</h3>
|
|
</div>
|
|
<p class="text-gray-600 mb-4">
|
|
현재 사용자의 권한 상태와 페이지 권한 체크를 확인합니다.
|
|
</p>
|
|
<div class="space-y-3">
|
|
<div class="p-3 bg-gray-50 rounded border">
|
|
<h4 class="font-medium text-gray-900 mb-2">기본 정보:</h4>
|
|
<div class="space-y-1 text-sm">
|
|
<p>
|
|
<strong>현재 경로:</strong> <code>{{ $route.path }}</code>
|
|
</p>
|
|
<p>
|
|
<strong>로그인 상태:</strong>
|
|
<span
|
|
:class="
|
|
userStore.isLoggedIn ? 'text-green-600' : 'text-red-600'
|
|
"
|
|
>
|
|
{{ userStore.isLoggedIn ? "로그인됨" : "로그인 안됨" }}
|
|
</span>
|
|
</p>
|
|
<p v-if="userStore.user">
|
|
<strong>사용자:</strong> {{ userStore.user.name }} ({{
|
|
userStore.user.userId
|
|
}})
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="p-3 bg-gray-50 rounded border">
|
|
<h4 class="font-medium text-gray-900 mb-2">권한 체크 결과:</h4>
|
|
<div class="space-y-1 text-sm">
|
|
<p>
|
|
<strong>페이지 권한({{ $route.path }}):</strong>
|
|
<span
|
|
:class="
|
|
permission.hasPagePermission($route.path)
|
|
? 'text-green-600'
|
|
: 'text-red-600'
|
|
"
|
|
>
|
|
{{
|
|
permission.hasPagePermission($route.path)
|
|
? "있음"
|
|
: "없음"
|
|
}}
|
|
</span>
|
|
</p>
|
|
<p>
|
|
<strong>테스트 페이지그룹 권한(PG01):</strong>
|
|
<span
|
|
:class="
|
|
permission.hasPageGroupPermission('PG01')
|
|
? 'text-green-600'
|
|
: 'text-red-600'
|
|
"
|
|
>
|
|
{{
|
|
permission.hasPageGroupPermission("PG01")
|
|
? "있음"
|
|
: "없음"
|
|
}}
|
|
</span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 권한별 버튼 테스트 -->
|
|
<div class="bg-white rounded-lg shadow-md p-6">
|
|
<div class="flex items-center mb-4">
|
|
<div
|
|
class="w-10 h-10 bg-green-500 rounded-full flex items-center justify-center mr-3"
|
|
>
|
|
<span class="text-white font-bold text-sm">2</span>
|
|
</div>
|
|
<h3 class="text-xl font-semibold text-gray-900">
|
|
컴포넌트 권한 테스트
|
|
</h3>
|
|
</div>
|
|
<p class="text-gray-600 mb-4">
|
|
각 컴포넌트 권한에 따라 버튼이 표시되거나 숨겨지는 것을
|
|
확인합니다.
|
|
</p>
|
|
<div class="space-y-3">
|
|
<div class="flex items-center space-x-2">
|
|
<PermissionButton
|
|
button-code="C010105"
|
|
@click="handleButtonClick('C010105')"
|
|
/>
|
|
</div>
|
|
|
|
<div class="flex items-center space-x-2">
|
|
<PermissionButton
|
|
button-code="C010102"
|
|
@click="handleButtonClick('C010102')"
|
|
/>
|
|
</div>
|
|
|
|
<div class="flex items-center space-x-2">
|
|
<PermissionButton
|
|
button-code="C010101"
|
|
@click="handleButtonClick('C010101')"
|
|
/>
|
|
</div>
|
|
|
|
<div class="flex items-center space-x-2">
|
|
<PermissionButton
|
|
button-code="C010103"
|
|
@click="handleButtonClick('C010103')"
|
|
/>
|
|
</div>
|
|
|
|
<div class="flex items-center space-x-2">
|
|
<PermissionButton
|
|
button-code="C010104"
|
|
@click="handleButtonClick('C010104')"
|
|
/>
|
|
</div>
|
|
|
|
<div class="flex items-center space-x-2">
|
|
<PermissionButton
|
|
button-code="C010106"
|
|
@click="handleButtonClick('C010106')"
|
|
/>
|
|
</div>
|
|
|
|
<div class="flex items-center space-x-2">
|
|
<PermissionButton
|
|
button-code="C010122"
|
|
@click="handleButtonClick('C010122')"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 페이지그룹 권한 테스트 -->
|
|
<div class="bg-white rounded-lg shadow-md p-6">
|
|
<div class="flex items-center mb-4">
|
|
<div
|
|
class="w-10 h-10 bg-orange-500 rounded-full flex items-center justify-center mr-3"
|
|
>
|
|
<span class="text-white font-bold text-sm">3</span>
|
|
</div>
|
|
<h3 class="text-xl font-semibold text-gray-900">
|
|
페이지그룹 권한 테스트
|
|
</h3>
|
|
</div>
|
|
<p class="text-gray-600 mb-4">
|
|
페이지그룹 권한에 따라 메뉴가 표시되거나 숨겨지는 것을 확인합니다.
|
|
</p>
|
|
<div class="space-y-3">
|
|
<div class="flex items-center space-x-2">
|
|
<div
|
|
v-if="permission.hasPageGroupPermission('PG01')"
|
|
class="bg-blue-100 text-blue-800 px-3 py-1 rounded text-sm"
|
|
>
|
|
테스트 페이지그룹
|
|
</div>
|
|
<span v-else class="text-gray-400 text-sm"
|
|
>테스트 페이지그룹 (권한 없음)</span
|
|
>
|
|
</div>
|
|
|
|
<div class="flex items-center space-x-2">
|
|
<div
|
|
v-if="permission.hasPageGroupPermission('PG02')"
|
|
class="bg-green-100 text-green-800 px-3 py-1 rounded text-sm"
|
|
>
|
|
관리자 페이지그룹
|
|
</div>
|
|
<span v-else class="text-gray-400 text-sm"
|
|
>관리자 페이지그룹 (권한 없음)</span
|
|
>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 우측: 권한 체크 로직 테스트 -->
|
|
<div class="lg:col-span-1">
|
|
<div class="bg-white rounded-lg shadow-md p-6">
|
|
<div class="flex items-center mb-4">
|
|
<div
|
|
class="w-10 h-10 bg-purple-500 rounded-full flex items-center justify-center mr-3"
|
|
>
|
|
<span class="text-white font-bold text-sm">4</span>
|
|
</div>
|
|
<h3 class="text-xl font-semibold text-gray-900">
|
|
권한 체크 로직
|
|
</h3>
|
|
</div>
|
|
<p class="text-gray-600 mb-4">
|
|
다양한 권한 체크 함수들의 동작을 테스트합니다.
|
|
</p>
|
|
|
|
<div class="space-y-4">
|
|
<div class="p-3 bg-gray-50 rounded border">
|
|
<h4 class="font-medium text-gray-900 mb-2 text-sm">
|
|
페이지 권한 체크:
|
|
</h4>
|
|
<p class="text-xs text-gray-600 mb-1">
|
|
<code>hasPagePermission('/admin/codes')</code>
|
|
</p>
|
|
<p
|
|
class="text-sm font-semibold"
|
|
:class="
|
|
permission.hasPagePermission('/admin/codes')
|
|
? 'text-green-600'
|
|
: 'text-red-600'
|
|
"
|
|
>
|
|
{{
|
|
permission.hasPagePermission("/admin/codes")
|
|
? "true"
|
|
: "false"
|
|
}}
|
|
</p>
|
|
</div>
|
|
|
|
<div class="p-3 bg-gray-50 rounded border">
|
|
<h4 class="font-medium text-gray-900 mb-2 text-sm">
|
|
페이지그룹 권한 체크:
|
|
</h4>
|
|
<p class="text-xs text-gray-600 mb-1">
|
|
<code>hasPageGroupPermission('PG01')</code>
|
|
</p>
|
|
<p
|
|
class="text-sm font-semibold"
|
|
:class="
|
|
permission.hasPageGroupPermission('PG01')
|
|
? 'text-green-600'
|
|
: 'text-red-600'
|
|
"
|
|
>
|
|
{{
|
|
permission.hasPageGroupPermission("PG01") ? "true" : "false"
|
|
}}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- API 권한 테스트 -->
|
|
<div class="bg-white rounded-lg shadow-md p-6 mb-8">
|
|
<div class="flex items-center mb-4">
|
|
<div
|
|
class="w-10 h-10 bg-indigo-500 rounded-full flex items-center justify-center mr-3"
|
|
>
|
|
<span class="text-white font-bold text-sm">5</span>
|
|
</div>
|
|
<h3 class="text-xl font-semibold text-gray-900">
|
|
페이지 권한 테스트
|
|
</h3>
|
|
</div>
|
|
<p class="text-gray-600 mb-4">
|
|
다양한 페이지 경로에 대한 권한을 테스트합니다. 권한이 없으면 홈으로
|
|
리다이렉트됩니다.
|
|
</p>
|
|
<div class="grid grid-cols-2 md:grid-cols-4 gap-4">
|
|
<div
|
|
v-for="pagePath in [
|
|
'/',
|
|
'/login',
|
|
'/register',
|
|
'/about',
|
|
'/sampleList',
|
|
'/admin/codes',
|
|
'/admin/logs',
|
|
'/admin/programs',
|
|
'/admin/resource',
|
|
'/test/permission-test',
|
|
'/test/culture-graph',
|
|
'/test/pathway',
|
|
'/test/test01',
|
|
'/test/common-test',
|
|
'/popup/addSamplePopup',
|
|
'/nonexistent',
|
|
]"
|
|
:key="pagePath"
|
|
class="p-3 rounded border text-center"
|
|
:class="
|
|
permission.hasPagePermission(pagePath)
|
|
? 'bg-green-50 border-green-200'
|
|
: 'bg-red-50 border-red-200'
|
|
"
|
|
>
|
|
<div class="text-sm font-medium text-gray-900 mb-1">
|
|
{{ pagePath }}
|
|
</div>
|
|
<div
|
|
class="text-xs"
|
|
:class="
|
|
permission.hasPagePermission(pagePath)
|
|
? 'text-green-600'
|
|
: 'text-red-600'
|
|
"
|
|
>
|
|
{{
|
|
permission.hasPagePermission(pagePath)
|
|
? "✓ 접근 가능"
|
|
: "✗ 접근 불가"
|
|
}}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="mt-4 p-3 bg-blue-50 rounded border">
|
|
<p class="text-sm text-blue-800">
|
|
<strong>참고:</strong> 실제로는 권한이 없는 경로에 접근하면 자동으로
|
|
홈으로 리다이렉트됩니다. 이 페이지는
|
|
<code>/test/permission-test</code> 경로로, 페이지 권한이 있어야
|
|
접근할 수 있습니다.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 권한 데이터 표시 -->
|
|
<div
|
|
v-if="userStore.isLoggedIn"
|
|
class="bg-white rounded-lg shadow-md p-6 mb-8"
|
|
>
|
|
<h3 class="text-xl font-semibold text-gray-900 mb-4">
|
|
현재 권한 데이터
|
|
</h3>
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
|
<!-- 페이지 권한 -->
|
|
<div class="bg-blue-50 p-4 rounded-lg">
|
|
<h4 class="text-lg font-semibold mb-3 text-blue-800">
|
|
페이지 권한
|
|
</h4>
|
|
<ul class="space-y-1">
|
|
<li
|
|
v-for="page in pages"
|
|
:key="page.oid"
|
|
class="text-sm bg-white p-2 rounded border"
|
|
>
|
|
<div class="font-medium">{{ page.name }} ({{ page.code }})</div>
|
|
<div class="text-gray-600">{{ page.path }}</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<!-- 페이지그룹 권한 -->
|
|
<div class="bg-green-50 p-4 rounded-lg">
|
|
<h4 class="text-lg font-semibold mb-3 text-green-800">
|
|
페이지그룹 권한
|
|
</h4>
|
|
<ul class="space-y-1">
|
|
<li
|
|
v-for="pageGroup in pageGroups"
|
|
:key="pageGroup.oid"
|
|
class="text-sm bg-white p-2 rounded border"
|
|
>
|
|
<div class="font-medium">
|
|
{{ pageGroup.name }} ({{ pageGroup.code }})
|
|
</div>
|
|
<div class="text-gray-600">{{ pageGroup.description }}</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<!-- 컴포넌트 권한 -->
|
|
<div class="bg-purple-50 p-4 rounded-lg">
|
|
<h4 class="text-lg font-semibold mb-3 text-purple-800">
|
|
컴포넌트 권한
|
|
</h4>
|
|
<ul class="space-y-1">
|
|
<li
|
|
v-for="component in components"
|
|
:key="component.oid"
|
|
class="text-sm bg-white p-2 rounded border"
|
|
>
|
|
<div class="font-medium">
|
|
{{ component.name }} ({{ component.code }})
|
|
</div>
|
|
<div class="text-gray-600">
|
|
{{ component.componentType }} - {{ component.description }}
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- PermissionButton 컴포넌트 사용 예시 -->
|
|
<div class="bg-green-50 border border-green-200 rounded-lg p-6 mb-6">
|
|
<h3 class="text-lg font-semibold text-green-800 mb-4">
|
|
PermissionButton 컴포넌트 사용 예시
|
|
</h3>
|
|
<div class="space-y-4">
|
|
<div>
|
|
<h4 class="font-medium text-green-700 mb-2">기본 사용법</h4>
|
|
<div class="flex flex-wrap gap-2">
|
|
<PermissionButton
|
|
button-code="C010101"
|
|
@click="handleButtonClick('C010101')"
|
|
/>
|
|
<PermissionButton
|
|
button-code="C010102"
|
|
@click="handleButtonClick('C010102')"
|
|
/>
|
|
<PermissionButton
|
|
button-code="C010103"
|
|
@click="handleButtonClick('C010103')"
|
|
/>
|
|
<PermissionButton
|
|
button-code="C010104"
|
|
@click="handleButtonClick('C010104')"
|
|
/>
|
|
<PermissionButton
|
|
button-code="C010105"
|
|
@click="handleButtonClick('C010105')"
|
|
/>
|
|
<PermissionButton
|
|
button-code="C010106"
|
|
@click="handleButtonClick('C010106')"
|
|
/>
|
|
</div>
|
|
<p class="text-sm text-green-600 mt-2">
|
|
버튼 텍스트는 권한 코드에서 자동으로 가져옵니다.
|
|
</p>
|
|
</div>
|
|
|
|
<div>
|
|
<h4 class="font-medium text-green-700 mb-2">비활성화 상태</h4>
|
|
<div class="flex flex-wrap gap-2">
|
|
<PermissionButton
|
|
button-code="C010104"
|
|
:disabled="true"
|
|
@click="handleButtonClick('C010104')"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<h4 class="font-medium text-green-700 mb-2">
|
|
권한이 없는 버튼 (표시되지 않음)
|
|
</h4>
|
|
<div class="flex flex-wrap gap-2">
|
|
<PermissionButton
|
|
button-code="C999999"
|
|
@click="handleButtonClick('C999999')"
|
|
/>
|
|
<span class="text-gray-500 text-sm"
|
|
>↑ 이 버튼은 권한이 없어서 표시되지 않습니다</span
|
|
>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 사용법 가이드 -->
|
|
<div class="bg-yellow-50 border border-yellow-200 rounded-lg p-6">
|
|
<h3 class="text-lg font-semibold text-yellow-800 mb-3">
|
|
권한 시스템 가이드
|
|
</h3>
|
|
<div class="text-yellow-700 space-y-2">
|
|
<p>
|
|
<strong>로그인 필요:</strong> 이 페이지를 사용하려면 먼저 로그인해야
|
|
합니다. 로그인 시 가데이터 권한이 자동으로 로드됩니다.
|
|
</p>
|
|
<p>
|
|
<strong>페이지 권한:</strong> 페이지 라우터 접근 권한을 제어합니다.
|
|
권한이 없으면 홈으로 리다이렉트됩니다.
|
|
</p>
|
|
<p>
|
|
<strong>페이지그룹 권한:</strong> 페이지그룹 표시 여부를 제어합니다.
|
|
권한이 없으면 페이지그룹이 숨겨집니다.
|
|
</p>
|
|
<p>
|
|
<strong>컴포넌트 권한:</strong> 버튼 등 UI 컴포넌트의 표시 여부를
|
|
제어합니다. 권한이 없으면 컴포넌트가 렌더링되지 않습니다.
|
|
</p>
|
|
<p>
|
|
<strong>PermissionButton 컴포넌트:</strong> 권한 체크와 클릭
|
|
이벤트를 자동으로 처리하는 재사용 가능한 버튼 컴포넌트입니다.
|
|
buttonCode prop으로 권한을 체크하고, 권한이 있을 때만 버튼이
|
|
표시됩니다.
|
|
</p>
|
|
<p>
|
|
<strong>백엔드 연동:</strong> 나중에 백엔드 API가 준비되면
|
|
<code>stores/permissions.ts</code>의
|
|
<code>fetchPermissions</code> 함수를 수정하여 실제 API를 호출하도록
|
|
변경할 수 있습니다.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
definePageMeta({
|
|
title: "권한 시스템 테스트",
|
|
description:
|
|
"페이지 권한, 메뉴 권한, 컴포넌트 권한의 동작을 테스트하는 페이지",
|
|
});
|
|
|
|
const permission = usePermission();
|
|
const userStore = useUserStore();
|
|
|
|
// 리소스 데이터를 computed로 선언
|
|
const pageGroups = computed(() => permission.getPageGroups());
|
|
const pages = computed(() => permission.getPages());
|
|
const components = computed(() => permission.getComponents());
|
|
|
|
// 이 페이지는 /test 경로이므로 페이지 권한이 필요합니다
|
|
// middleware/auth.ts에서 자동으로 권한을 체크합니다
|
|
// 로그인 시 권한 데이터가 자동으로 로드됩니다
|
|
|
|
// 버튼 클릭 핸들러
|
|
const handleButtonClick = (buttonCode: string) => {
|
|
console.log(`버튼 클릭됨: ${buttonCode}`);
|
|
alert(`${buttonCode} 버튼이 클릭되었습니다!`);
|
|
};
|
|
</script>
|