권한부여 수정

src/router/index.js

@@ -148,7 +148,7 @@ router.beforeEach(async (to, from, next) => {
 
     // Authorization 페이지는 ID가 26이 아니면 접근 차단
     if (to.path === '/authorization' && userId !== allowedUserId) {
-        return next('/');
+        return next();
     }
 
     // 비로그인 사용자만 접근 가능한 페이지인데 로그인된 경우 → 홈으로 이동

src/views/admin/TheAuthorization.vue

@@ -1,26 +1,35 @@
 <template>
-    <div class="container text-center flex-grow-1 container-p-y">
+<div class="container text-center flex-grow-1 container-p-y">
     <div class="card">
     <div class="card-header d-flex flex-column">
         <h3>관리자 권한 부여</h3>
         <div class="user-card-container">
         <div v-for="user in users" :key="user.id" class="user-card">
             <!-- 프로필 사진 -->
-                        <img :src="getProfileImage(user.photo)" class="profile-img" alt="프로필 사진" @error="setDefaultImage" />
+            <img
+            :src="getProfileImage(user.photo)"
+            class="profile-img"
+            alt="프로필 사진"
+            @error="setDefaultImage"
+            />
             <!-- 사용자 정보 -->
             <div class="user-info">
             <h5>{{ user.name }}</h5>
             </div>
-                        <!-- 권한 토글 버튼 -->
+            <!-- 권한 토글 버튼 (기본 동작 막고 클릭시 직접 토글 처리) -->
             <label class="switch me-0">
-                            <input type="checkbox" :checked="user.isAdmin" @change="toggleAdmin(user)" />
+            <input
+                type="checkbox"
+                :checked="user.isAdmin"
+                @click="handleToggle($event, user)"
+            />
             <span class="slider round"></span>
             </label>
         </div>
         </div>
     </div>
     </div>
-    </div>
+</div>
 </template>
 
 <script setup>
@@ -32,20 +41,17 @@ const users = ref([]);
 const toastStore = useToastStore();
 const baseUrl = axios.defaults.baseURL.replace(/api\/$/, "");
 const defaultProfile = "/img/icons/icon.png";
-const allowedUserId = 1;  // 특정 ID (변경필요!!)
+const allowedUserId = 1; // 특정 ID (필요에 따라 변경)
+
 // 사용자 목록 가져오기
 async function fetchUsers() {
-    try {
+try {
-        const response = await axios.get('admin/users'); // API 경로 확인 필요
+    const response = await axios.get('admin/users'); // API 경로 확인
-
-        // API 응답 구조 확인 후 데이터가 배열인지 체크
     if (!response.data || !Array.isArray(response.data.data)) {
     throw new Error("올바른 데이터 형식이 아닙니다.");
     }
-
-        // MEMBERSEQ가 1이 아닌 회원만 필터링하여 데이터 매핑
     users.value = response.data.data
-            .filter(user => user.MEMBERSEQ !== allowedUserId) // MEMBERSEQ가 1이면 제외
+    .filter(user => user.MEMBERSEQ !== allowedUserId)
     .map(user => ({
         id: user.MEMBERSEQ,
         name: user.MEMBERNAM,
@@ -53,44 +59,53 @@ async function fetchUsers() {
         color: user.MEMBERCOL,
         isAdmin: user.MEMBERROL === 'ROLE_ADMIN',
     }));
-
+} catch (error) {
-    } catch (error) {
     toastStore.onToast('사용자 목록을 불러오지 못했습니다.', 'e');
-    }
+}
 }
 
 // 프로필 이미지 가져오기
 function getProfileImage(photo) {
-    return photo || defaultProfile;
+return photo || defaultProfile;
 }
 
 // 이미지 로드 오류 시 기본 이미지 설정
 function setDefaultImage(event) {
-    event.target.src = defaultProfile;
+event.target.src = defaultProfile;
 }
 
-// 관리자 권한 토글 함수
+// 권한 토글 시 기본 동작 막고 직접 제어하는 함수
-async function toggleAdmin(user) {
+async function handleToggle(event, user) {
-    const requestData = {
+// Prevent the default checkbox toggle behavior
-        id: user.id,
+event.preventDefault();
-        role: user.isAdmin ? 'MEMBER' : 'ADMIN'
-    };
-    try {
-        const response = await axios.put('admin/role', requestData);
 
+// 저장: 현재 상태를 기반으로 변경 요청 (체크박스는 아직 변하지 않았음)
+const originalState = user.isAdmin;
+const newState = !originalState;
+
+const requestData = {
+    id: user.id,
+    role: originalState ? 'MEMBER' : 'ADMIN'
+};
+
+try {
+    const response = await axios.put('admin/role', requestData);
     if (response.status === 200) {
-            user.isAdmin = !user.isAdmin;
+    // 서버 요청 성공 시에만 상태를 업데이트
+    user.isAdmin = newState;
     toastStore.onToast(`'${user.name}'의 권한이 '${requestData.role}'(으)로 변경되었습니다.`, 's');
     } else {
     throw new Error('권한 변경 실패');
     }
-    } catch (error) {
+} catch (error) {
+    // 에러 발생 시 상태를 변경하지 않음
     toastStore.onToast('권한 변경에 실패했습니다.', 'e');
-    }
+}
 }
 
 onMounted(fetchUsers);
 </script>
 
 <style scoped>
+/* 필요에 따라 스타일 추가 */
 </style>