piratezon_new/app/components/header.vue

<template>
  <header class="user--header">
    <div class="header--wrap">
      <NuxtLink to="/" class="header--logo"><i class="logo"></i><h1>파이럿존</h1></NuxtLink>
      <button v-if="isLoggedIn" type="button" @click="handleLogout">로그아웃</button>
      <NuxtLink v-else to="/login" class="header--login-link">로그인</NuxtLink>
    </div>

    <AppAlertModal
      v-model="confirmModal"
      type="confirm"
      icon-type="info"
      title="로그아웃"
      message="로그아웃 하시겠습니까?"
      confirm-text="로그아웃"
      cancel-text="취소"
      @confirm="doLogout"
    />
  </header>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import AppAlertModal from '~/components/AppAlertModal.vue'

const router = useRouter()
const { post } = useApi()

const isLoggedIn = ref(false)
const confirmModal = ref(false)

const checkAuth = () => {
  const token = localStorage.getItem('user_token') || sessionStorage.getItem('user_token')
  const expires = localStorage.getItem('user_token_expires') || sessionStorage.getItem('user_token_expires')
  isLoggedIn.value = !!(token && expires && new Date(expires.replace(' ', 'T')) > new Date())
}

const handleLogout = () => {
  confirmModal.value = true
}

const clearAuth = () => {
  ['user_token', 'user_token_expires', 'user', 'auto_login'].forEach((k) => {
    localStorage.removeItem(k)
    sessionStorage.removeItem(k)
  })
}

const doLogout = async () => {
  const token = localStorage.getItem('user_token') || sessionStorage.getItem('user_token')

  // 백엔드 토큰 삭제 (실패해도 무시 — 클라이언트 정리는 무조건 진행)
  if (token) {
    try {
      await post('/users/logout', null, {
        headers: { Authorization: `Bearer ${token}` }
      })
    } catch (e) {
      console.warn('[Logout] API failed but proceeding:', e)
    }
  }

  clearAuth()
  isLoggedIn.value = false
  router.push('/login')
}

onMounted(() => {
  checkAuth()
  // 다른 탭에서 로그인/아웃 시 동기화
  window.addEventListener('storage', checkAuth)
})
</script>