[인증 오류 처리 개선] API 호출 시 인증 오류 발생 시 사용자 로그아웃 처리 및 인증 오류 페이지 추가. auth.global.ts에서 공개 라우트에 인증 오류 페이지 포함, 사용자 세션 정리 로직 개선.

composables/useApi.ts

@@ -75,11 +75,26 @@ export const useApi = async <T>(
       ...(headers && { headers }),
     };
 
-    return ($api as any)(path, apiOpts).catch((error: any) => {
+    return ($api as any)(path, apiOpts).catch(async (error: any) => {
+      const status = error.response?.status;
+      const message = error.response._data.message;
+
+      if (
+        status === 401 &&
+        ["JWT_TOKEN_EXPIRED", "INVALID_CLIENT_IP", "JWT_TOKEN_NULL"].includes(
+          message
+        )
+      ) {
+        const userStore = useUserStore();
+        userStore.user = null;
+        userStore.isLoggedIn = false;
+        await navigateTo(`/auth-error?type=${message}`);
+        throw error;
+      }
+
       // 사용자에게 알림 표시
       if (showAlert) {
-        const status = error.response?.status;
-        let message =
+        let description =
           status === 404
             ? "요청한 리소스를 찾을 수 없습니다."
             : status === 500
@@ -88,10 +103,10 @@ export const useApi = async <T>(
 
         // 서버에서 온 에러 메시지가 있으면 우선 사용
         if (error.response?._data?.description) {
-          message = error.response._data.description;
+          description = error.response._data.description;
         }
 
-        alert(message);
+        alert(description);
       }
 
       // 에러 처리 방식에 따라 반환

middleware/auth.global.ts

@@ -4,7 +4,7 @@ export default defineNuxtRouteMiddleware(async (to, _from) => {
     const { hasPagePermission } = usePermission();
 
     // 공개 라우트 목록 (로그인 없이 접근 가능)
-    const publicRoutes = ["/login", "/register"];
+    const publicRoutes = ["/login", "/register", "/auth-error"];
 
     // 공개 라우트인지 확인
     const isPublicRoute = publicRoutes.some(route => to.path === route);

pages/auth-error.vue

@@ -0,0 +1,176 @@
+<template>
+  <div class="auth-error-container">
+    <div class="auth-error-card">
+      <div class="auth-error-icon">
+        <Icon name="mdi:alert-circle" size="64" color="#ef4444" />
+      </div>
+
+      <h1 class="auth-error-title">인증 오류</h1>
+
+      <div class="auth-error-message">
+        <p v-if="errorType === 'JWT_TOKEN_EXPIRED'">
+          세션이 만료되었습니다.<br />
+          보안을 위해 다시 로그인해 주세요.
+        </p>
+        <p v-else-if="errorType === 'INVALID_CLIENT_IP'">
+          접근 권한이 없습니다.<br />
+          허용된 IP에서 접근해 주세요.
+        </p>
+        <p v-else-if="errorType === 'JWT_TOKEN_NULL'">
+          인증 정보가 없습니다.<br />
+          다시 로그인해 주세요.
+        </p>
+        <p v-else>
+          인증에 문제가 발생했습니다.<br />
+          다시 로그인해 주세요.
+        </p>
+      </div>
+
+      <div class="auth-error-actions">
+        <button
+          class="auth-error-btn primary"
+          :disabled="isLoading"
+          @click="goToLogin"
+        >
+          <Icon name="mdi:login" size="20" />
+          로그인하기
+        </button>
+      </div>
+
+      <div class="auth-error-help">
+        <p>문제가 지속되면 관리자에게 문의해 주세요.</p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+// auth 레이아웃 사용
+definePageMeta({
+  layout: "auth",
+});
+
+const route = useRoute();
+const isLoading = ref(false);
+
+// 쿼리 파라미터에서 에러 타입 가져오기
+const errorType = computed(() => (route.query.type as string) || "UNKNOWN");
+
+const goToLogin = async () => {
+  isLoading.value = true;
+  try {
+    await navigateTo("/login");
+  } finally {
+    isLoading.value = false;
+  }
+};
+
+// 페이지 진입 시 사용자 세션 정리
+onMounted(() => {
+  const userStore = useUserStore();
+  userStore.user = null;
+  userStore.isLoggedIn = false;
+});
+</script>
+
+<style scoped>
+.auth-error-container {
+  min-height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 20px;
+}
+
+.auth-error-card {
+  background: white;
+  border-radius: 12px;
+  padding: 48px;
+  box-shadow:
+    0 4px 6px -1px rgba(0, 0, 0, 0.1),
+    0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  text-align: center;
+  max-width: 480px;
+  width: 100%;
+  border: 1px solid #e2e8f0;
+}
+
+.auth-error-icon {
+  margin-bottom: 24px;
+}
+
+.auth-error-title {
+  font-size: 28px;
+  font-weight: 700;
+  color: #1e293b;
+  margin-bottom: 16px;
+}
+
+.auth-error-message {
+  margin-bottom: 32px;
+}
+
+.auth-error-message p {
+  font-size: 16px;
+  color: #64748b;
+  line-height: 1.6;
+  margin: 0;
+}
+
+.auth-error-actions {
+  display: flex;
+  justify-content: center;
+  margin-bottom: 24px;
+}
+
+.auth-error-btn {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 12px 32px;
+  border-radius: 8px;
+  font-weight: 600;
+  font-size: 14px;
+  border: none;
+  cursor: pointer;
+  transition: all 0.2s;
+  justify-content: center;
+}
+
+.auth-error-btn.primary {
+  background: #0f172a;
+  color: white;
+}
+
+.auth-error-btn.primary:hover:not(:disabled) {
+  background: #1e293b;
+  transform: translateY(-1px);
+}
+
+.auth-error-btn:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+  transform: none;
+}
+
+.auth-error-help {
+  padding-top: 16px;
+  border-top: 1px solid #e2e8f0;
+}
+
+.auth-error-help p {
+  font-size: 14px;
+  color: #94a3b8;
+  margin: 0;
+}
+
+@media (max-width: 640px) {
+  .auth-error-card {
+    padding: 32px 24px;
+  }
+
+  .auth-error-btn {
+    width: 100%;
+  }
+}
+</style>

stores/user.ts

@@ -54,13 +54,13 @@ export const useUserStore = defineStore(
         showAlert: false,
       });
 
-      user.value = null;
-      isLoggedIn.value = false;
+      // user.value = null;
+      // isLoggedIn.value = false;
 
-      tabsStore.resetTabs();
-      permissionsStore.clearPermissions();
+      // tabsStore.resetTabs();
+      // permissionsStore.clearPermissions();
 
-      await navigateTo("/login");
+      // await navigateTo("/login");
     };
 
     return {