권한페이지 링크설정정

src/layouts/TheMenu.vue

@@ -74,7 +74,7 @@
                     <div class="text-truncate">Commuters</div>
                 </RouterLink>
             </li>
-            <li class="menu-item" :class="$route.path.includes('/authorization') ? 'active' : ''">
+            <li v-if="userId === allowedUserId" class="menu-item" :class="$route.path.includes('/authorization') ? 'active' : ''">
                 <RouterLink class="menu-link" to="/authorization">
                     <i class="menu-icon icon-base bx bx-user-check"></i>
                     <div class="text-truncate">Authorization</div>
@@ -92,7 +92,13 @@
 </template>
 
 <script setup>
-    import router from '@/router';
+import { computed } from "vue";
+import { useUserInfoStore } from '@s/useUserInfoStore';
+
+const userStore = useUserInfoStore();
+const allowedUserId = 26;  // 특정 ID (변경필요!!)
+
+const userId = computed(() => userStore.user?.id ?? null);
 </script>
 
 <style lang="scss" scoped></style>

src/router/index.js

@@ -1,5 +1,6 @@
 import { createRouter, createWebHistory } from 'vue-router'
 import { useAuthStore } from '@s/useAuthStore';
+import { useUserInfoStore } from '@s/useUserInfoStore';
 
 // 초기 렌더링 속도를 위해 지연 로딩 사용
 const routes = [
@@ -86,6 +87,7 @@ const routes = [
     {
         path: '/authorization',
         component: () => import('@v/admin/TheAuthorization.vue'),
+        meta: { requiresAuth: true }
     },
     {
         path: "/:anything(.*)",
@@ -101,38 +103,27 @@ const router = createRouter({
 router.beforeEach(async (to, from, next) => {
     const authStore = useAuthStore();
     await authStore.checkAuthStatus(); // 로그인 상태 확인
+    const allowedUserId = 26;  // 특정 ID (변경필요!!)
+    const userStore = useUserInfoStore();
+    const userId = userStore.user?.id ?? null;
 
+    // 로그인이 필요한 페이지인데 로그인되지 않은 경우 → 로그인 페이지로 이동
     if (to.meta.requiresAuth && !authStore.isAuthenticated) {
-        // 로그인이 필요한 페이지인데 로그인되지 않은 경우 → 로그인 페이지로 이동
-        next({ name: 'Login' });
-    } else if (to.meta.requiresGuest && authStore.isAuthenticated) {
-        // 비로그인 사용자만 접근 가능한 페이지인데 로그인된 경우 → 홈으로 이동
-        next({ name: 'Home' });
-    } else {
-        next();
+        return next({ name: 'Login', query: { redirect: to.fullPath } });
     }
+
+    // Authorization 페이지는 ID가 26이 아니면 접근 차단
+    if (to.path === "/authorization" && userId !== allowedUserId) {
+        return next("/");
+    }
+
+    // 비로그인 사용자만 접근 가능한 페이지인데 로그인된 경우 → 홈으로 이동
+    if (to.meta.requiresGuest && authStore.isAuthenticated) {
+        return next({ name: 'Home' });
+    }
+
+    // 모든 조건을 통과하면 정상적으로 이동
+    next();
 });
 
-
-router.beforeEach(async (to, from, next) => {
-    const authStore = useAuthStore()
-
-    // 최초 앱 로드 시 인증 상태 체크
-    await authStore.checkAuthStatus()
-
-    // 현재 라우트에 인증이 필요한지 확인
-    const requiresAuth = to.meta.requiresAuth === true
-
-    if (requiresAuth && !authStore.isAuthenticated) {
-        // 인증되지 않은 사용자를 로그인 페이지로 리다이렉트
-        // 원래 가려던 페이지를 쿼리 파라미터로 전달
-        next({
-            name: 'Login',
-            query: { redirect: to.fullPath }
-        })
-    } else {
-        next()
-    }
-})
-
 export default router

src/views/admin/TheAuthorization.vue

@@ -71,7 +71,7 @@ function setDefaultImage(event) {
 async function toggleAdmin(user) {
     const requestData = {
         id: user.id,
-        role: user.isAdmin ? 'USER' : 'ADMIN'
+        role: user.isAdmin ? 'MEMBER' : 'ADMIN'
     };
     try {
         const response = await axios.put('admin/role', requestData); // API 경로 수정