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

2025-09-26 09:02:47 +09:00
parent d60e60010b
commit 5687db9f25
4 changed files with 202 additions and 11 deletions
--- a/pages/auth-error.vue
+++ b/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>