diff --git a/client/src/App.vue b/client/src/App.vue
index 6e9fc98..caeaf16 100644
--- a/client/src/App.vue
+++ b/client/src/App.vue
@@ -1,11 +1,16 @@
 <template>
-  <ReservationAppShell>
+  <RouterView v-if="plainLayout" />
+  <ReservationAppShell v-else>
     <RouterView />
   </ReservationAppShell>
 </template>
 
 <script setup lang="ts">
-import { RouterView } from 'vue-router'
+import { computed } from 'vue'
+import { RouterView, useRoute } from 'vue-router'
 
 import ReservationAppShell from '@/layouts/ReservationAppShell.vue'
+
+const route = useRoute()
+const plainLayout = computed(() => route.meta.layout === 'plain')
 </script>
diff --git a/client/src/components/reservation/ReservationOperaPanel.vue b/client/src/components/reservation/ReservationOperaPanel.vue
index f411b4e..45f7bd1 100644
--- a/client/src/components/reservation/ReservationOperaPanel.vue
+++ b/client/src/components/reservation/ReservationOperaPanel.vue
@@ -9,7 +9,7 @@
       </div>
 
       <label
-        v-if="operations.length"
+        v-if="operations.length && showActions"
         class="simulate-toggle"
       >
         <input
@@ -46,7 +46,10 @@
 
         <ReservationStatusBadge :status="operation.operation_status" />
 
-        <div class="operation-item__actions">
+        <div
+          v-if="showActions"
+          class="operation-item__actions"
+        >
           <button
             type="button"
             class="icon-button"
@@ -93,11 +96,14 @@ import { executeReservationOperaOperation, retryReservationOperaOperation } from
 import type { ReservationOperaOperationResult } from '@/types/reservation'
 import { formatReservationOperaOperation } from '@/utils/reservationDisplay'
 
-const props = defineProps<{
+const props = withDefaults(defineProps<{
   taskId: string
   operations: ReservationOperaOperationResult[]
   executable: boolean
-}>()
+  showActions?: boolean
+}>(), {
+  showActions: true,
+})
 
 const emit = defineEmits<{
   operationUpdated: [operation: ReservationOperaOperationResult]
diff --git a/client/src/components/reservation/ReservationTaskDetailPanel.vue b/client/src/components/reservation/ReservationTaskDetailPanel.vue
index f04d73d..aabd3c4 100644
--- a/client/src/components/reservation/ReservationTaskDetailPanel.vue
+++ b/client/src/components/reservation/ReservationTaskDetailPanel.vue
@@ -117,8 +117,12 @@
             :validation-errors="validationErrorMessages"
           />
 
-          <footer class="task-actions">
+          <footer
+            v-if="canEditTask || canConfirmTask"
+            class="task-actions"
+          >
             <button
+              v-if="canEditTask"
               type="button"
               class="secondary-button"
               :disabled="!canSave || mutationBusy !== null"
@@ -131,6 +135,7 @@
               {{ t('task.saveDraft') }}
             </button>
             <button
+              v-if="canConfirmTask"
               type="button"
               class="primary-button"
               :disabled="!canConfirm || mutationBusy !== null"
@@ -149,10 +154,14 @@
           <ReservationOperaPanel
             :task-id="detail.task_id"
             :operations="detail.opera_operations"
-            :executable="detail.availability.executable"
+            :executable="detail.availability.executable && canExecuteOpera"
+            :show-actions="canExecuteOpera"
             @operation-updated="replaceOperation"
           />
-          <ReservationAuditTimeline :items="audits" />
+          <ReservationAuditTimeline
+            v-if="canViewAudit"
+            :items="audits"
+          />
         </aside>
       </div>
     </template>
@@ -191,12 +200,14 @@ import {
 } from '@/utils/reservationFieldRules'
 import { formatReservationMaybeStableReason, formatReservationTaskCard } from '@/utils/reservationDisplay'
 import { formatReservationDateTime } from '@/utils/reservationFormat'
+import { useAuthStore } from '@/stores/authStore'
 
 const props = defineProps<{
   taskId: string
 }>()
 
 const { t } = useI18n()
+const authStore = useAuthStore()
 const loading = ref(false)
 const errorMessage = ref('')
 const actionErrorMessage = ref('')
@@ -208,8 +219,12 @@ const validationErrors = ref<ReservationFieldValidationErrors>({})
 const validationSummaryActive = ref(false)
 const mutationBusy = ref<'save' | 'confirm' | 'manual-convert' | null>(null)
 
-const canSave = computed(() => Boolean(detail.value?.availability.editable))
-const canConfirm = computed(() => Boolean(detail.value?.availability.confirmable))
+const canEditTask = computed(() => authStore.hasPermission('RESERVATION_TASK_EDIT'))
+const canConfirmTask = computed(() => authStore.hasPermission('RESERVATION_TASK_CONFIRM'))
+const canExecuteOpera = computed(() => authStore.hasPermission('RESERVATION_OPERA_SIM_EXECUTE'))
+const canViewAudit = computed(() => authStore.hasPermission('RESERVATION_AUDIT_READ'))
+const canSave = computed(() => canEditTask.value && Boolean(detail.value?.availability.editable))
+const canConfirm = computed(() => canConfirmTask.value && Boolean(detail.value?.availability.confirmable))
 const isManualReviewTask = computed(() => (detail.value ? taskHasManualReviewCode(detail.value) : false))
 const validationErrorMessages = computed(() => toValidationErrorMessages(validationErrors.value))
 
@@ -237,7 +252,12 @@ async function loadTask(taskId: string): Promise<void> {
   try {
     const [nextDetail, nextAudits] = await Promise.all([
       fetchReservationTaskDetail(taskId),
-      fetchReservationTaskAudits(taskId),
+      canViewAudit.value
+        ? fetchReservationTaskAudits(taskId)
+        : Promise.resolve({
+            task_id: taskId,
+            items: [],
+          }),
     ])
     applyTaskData(nextDetail, nextAudits.items)
   } catch (error) {
@@ -271,7 +291,12 @@ async function submitManualReviewConversion(request: ReservationManualReviewConv
     const result = await convertReservationManualReviewTask(detail.value.task_id, request)
     const [nextDetail, nextAudits] = await Promise.all([
       fetchReservationTaskDetail(detail.value.task_id),
-      fetchReservationTaskAudits(detail.value.task_id),
+      canViewAudit.value
+        ? fetchReservationTaskAudits(detail.value.task_id)
+        : Promise.resolve({
+            task_id: detail.value.task_id,
+            items: [],
+          }),
     ])
     applyTaskData(nextDetail, nextAudits.items)
     notice.value = t('task.manualConversion.succeeded', {
@@ -289,6 +314,9 @@ async function mutateTaskPayload(action: 'save' | 'confirm'): Promise<void> {
   if (!detail.value) {
     return
   }
+  if ((action === 'save' && !canSave.value) || (action === 'confirm' && !canConfirm.value)) {
+    return
+  }
   const taskId = detail.value.task_id
   mutationBusy.value = action
   actionErrorMessage.value = ''
@@ -310,7 +338,9 @@ async function mutateTaskPayload(action: 'save' | 'confirm'): Promise<void> {
       confirmed_payload: result.confirmed_payload,
       opera_operations: result.opera_operations,
     }
-    await refreshAudits(taskId)
+    if (canViewAudit.value) {
+      await refreshAudits(taskId)
+    }
     notice.value = action === 'save' ? t('task.savedLocally') : t('task.confirmedLocally')
   } catch (error) {
     actionErrorMessage.value = error instanceof Error ? error.message : String(error)
diff --git a/client/src/config/reservationConfig.ts b/client/src/config/reservationConfig.ts
index f0a7878..4bf3fdd 100644
--- a/client/src/config/reservationConfig.ts
+++ b/client/src/config/reservationConfig.ts
@@ -1,3 +1,14 @@
 const configuredReservationHotelId = import.meta.env.VITE_RESERVATION_HOTEL_ID?.trim()
 
 export const reservationHotelId = configuredReservationHotelId || 'HOTEL-TEST'
+
+let reservationHotelIdProvider: (() => string | null | undefined) | null = null
+
+export function setReservationHotelIdProvider(provider: (() => string | null | undefined) | null): void {
+  reservationHotelIdProvider = provider
+}
+
+export function getReservationHotelId(): string {
+  const providedHotelId = reservationHotelIdProvider?.()?.trim()
+  return providedHotelId || reservationHotelId
+}
diff --git a/client/src/i18n/locales/en-US.ts b/client/src/i18n/locales/en-US.ts
index 0abb5fa..93f2ee3 100644
--- a/client/src/i18n/locales/en-US.ts
+++ b/client/src/i18n/locales/en-US.ts
@@ -8,6 +8,21 @@ export default {
     healthDown: 'Backend offline',
     healthChecking: 'Checking',
   },
+  auth: {
+    loginTitle: 'Sign in',
+    loginSubtitle: 'Use your system account to enter the TH Hotel reservation workspace.',
+    username: 'Username',
+    password: 'Password',
+    loginSubmit: 'Sign in',
+    loggingIn: 'Signing in',
+    loginFailed: 'The username or password is incorrect.',
+    logout: 'Sign out',
+    currentUser: 'Current user',
+    currentHotel: 'Current hotel',
+    unauthorizedTitle: 'No access',
+    unauthorizedMessage: 'Your account does not have permission to access this page or action.',
+    backHome: 'Back to available page',
+  },
   nav: {
     orders: 'Order list',
     taskQueue: 'Task queue',
diff --git a/client/src/i18n/locales/th-TH.ts b/client/src/i18n/locales/th-TH.ts
index 13fc92a..47a2012 100644
--- a/client/src/i18n/locales/th-TH.ts
+++ b/client/src/i18n/locales/th-TH.ts
@@ -8,6 +8,21 @@ export default {
     healthDown: 'หลังบ้านออฟไลน์',
     healthChecking: 'กำลังตรวจสอบ',
   },
+  auth: {
+    loginTitle: 'เข้าสู่ระบบ',
+    loginSubtitle: 'ใช้บัญชีระบบเพื่อเข้าสู่พื้นที่ทำงานการจองของ TH Hotel',
+    username: 'ชื่อผู้ใช้',
+    password: 'รหัสผ่าน',
+    loginSubmit: 'เข้าสู่ระบบ',
+    loggingIn: 'กำลังเข้าสู่ระบบ',
+    loginFailed: 'ชื่อผู้ใช้หรือรหัสผ่านไม่ถูกต้อง',
+    logout: 'ออกจากระบบ',
+    currentUser: 'ผู้ใช้ปัจจุบัน',
+    currentHotel: 'โรงแรมปัจจุบัน',
+    unauthorizedTitle: 'ไม่มีสิทธิ์เข้าถึง',
+    unauthorizedMessage: 'บัญชีนี้ไม่มีสิทธิ์เข้าถึงหน้านี้หรือการดำเนินการนี้',
+    backHome: 'กลับไปหน้าที่เข้าถึงได้',
+  },
   nav: {
     orders: 'รายการออเดอร์',
     taskQueue: 'คิวงาน',
diff --git a/client/src/i18n/locales/zh-CN.ts b/client/src/i18n/locales/zh-CN.ts
index c5e60f0..caea094 100644
--- a/client/src/i18n/locales/zh-CN.ts
+++ b/client/src/i18n/locales/zh-CN.ts
@@ -8,6 +8,21 @@ export default {
     healthDown: '后端未连接',
     healthChecking: '检查中',
   },
+  auth: {
+    loginTitle: '登录系统',
+    loginSubtitle: '使用系统账号进入 TH Hotel 预订处理工作台。',
+    username: '用户名',
+    password: '密码',
+    loginSubmit: '登录',
+    loggingIn: '登录中',
+    loginFailed: '用户名或密码错误。',
+    logout: '退出登录',
+    currentUser: '当前用户',
+    currentHotel: '当前酒店',
+    unauthorizedTitle: '没有访问权限',
+    unauthorizedMessage: '当前账号没有访问这个页面或操作的权限，请联系管理员调整角色权限。',
+    backHome: '返回可访问页面',
+  },
   nav: {
     orders: '订单列表',
     taskQueue: '任务队列',
diff --git a/client/src/layouts/ReservationAppShell.vue b/client/src/layouts/ReservationAppShell.vue
index 47fe110..88f7eb1 100644
--- a/client/src/layouts/ReservationAppShell.vue
+++ b/client/src/layouts/ReservationAppShell.vue
@@ -3,7 +3,7 @@
     <aside class="app-sidebar">
       <RouterLink
         class="brand"
-        to="/reservation/orders"
+        :to="brandTarget"
       >
         <span class="brand-mark" />
         <span>
@@ -18,15 +18,15 @@
       >
         <RouterLink
           v-for="item in navItems"
-          :key="item.to"
-          :to="item.to"
+          :key="item.menu_code"
+          :to="item.route_path"
           class="app-nav__item"
         >
           <i
-            :class="item.icon"
+            :class="item.icon_key || 'pi pi-circle'"
             aria-hidden="true"
           />
-          <span>{{ t(item.labelKey) }}</span>
+          <span>{{ menuLabel(item) }}</span>
         </RouterLink>
       </nav>
     </aside>
@@ -35,10 +35,57 @@
       <header class="app-topbar">
         <div>
           <strong>{{ pageTitle }}</strong>
-          <small>{{ reservationHotelId }}</small>
+          <small>{{ currentHotelLabel }}</small>
         </div>
 
         <div class="app-topbar__actions">
+          <div
+            v-if="authStore.isAuthenticated"
+            class="auth-context"
+          >
+            <span class="user-chip">
+              <i
+                class="pi pi-user"
+                aria-hidden="true"
+              />
+              {{ currentUserLabel }}
+            </span>
+
+            <label
+              v-if="hotelSwitchable"
+              class="hotel-select"
+              :title="t('auth.currentHotel')"
+            >
+              <i
+                class="pi pi-building"
+                aria-hidden="true"
+              />
+              <select
+                :value="authStore.selectedHotelId ?? ''"
+                @change="changeHotel"
+              >
+                <option
+                  v-for="hotel in authStore.hotels"
+                  :key="hotel.hotel_id"
+                  :value="hotel.hotel_id"
+                >
+                  {{ hotel.hotel_name || hotel.hotel_id }}
+                </option>
+              </select>
+            </label>
+
+            <span
+              v-else
+              class="hotel-chip"
+            >
+              <i
+                class="pi pi-building"
+                aria-hidden="true"
+              />
+              {{ currentHotelLabel }}
+            </span>
+          </div>
+
           <span
             class="health-pill"
             :class="`health-pill--${healthState}`"
@@ -76,6 +123,19 @@
               aria-hidden="true"
             />
           </button>
+
+          <button
+            v-if="authStore.isAuthenticated"
+            type="button"
+            class="logout-button"
+            :title="t('auth.logout')"
+            @click="logout"
+          >
+            <i
+              class="pi pi-sign-out"
+              aria-hidden="true"
+            />
+          </button>
         </div>
       </header>
 
@@ -88,16 +148,19 @@
 
 <script setup lang="ts">
 import { computed, onMounted, ref } from 'vue'
-import { RouterLink, useRoute } from 'vue-router'
+import { RouterLink, useRoute, useRouter } from 'vue-router'
 import { useI18n } from 'vue-i18n'
 
-import { reservationHotelId } from '@/config/reservationConfig'
+import type { AuthMenuResult } from '@/types/auth'
 import { fetchBackendHealth } from '@/services/healthService'
 import { useAppPreferencesStore, type SupportedLocale } from '@/stores/appPreferences'
+import { useAuthStore } from '@/stores/authStore'
 
 const route = useRoute()
+const router = useRouter()
 const { t, locale } = useI18n()
 const preferences = useAppPreferencesStore()
+const authStore = useAuthStore()
 const healthState = ref<'checking' | 'up' | 'down'>('checking')
 
 const localeOptions: Array<{ value: SupportedLocale; label: string }> = [
@@ -106,23 +169,20 @@ const localeOptions: Array<{ value: SupportedLocale; label: string }> = [
   { value: 'th-TH', label: 'ไทย' },
 ]
 
-const navItems = [
-  {
-    to: '/reservation/orders',
-    icon: 'pi pi-list',
-    labelKey: 'nav.orders',
-  },
-  {
-    to: '/reservation/tasks',
-    icon: 'pi pi-check-square',
-    labelKey: 'nav.taskQueue',
-  },
-  {
-    to: '/debug/eml-superagent',
-    icon: 'pi pi-upload',
-    labelKey: 'nav.debugEml',
-  },
-]
+const menuLabelKeys: Record<string, string> = {
+  RESERVATION_ORDERS: 'nav.orders',
+  RESERVATION_TASKS: 'nav.taskQueue',
+  DEBUG_EML_SUPERAGENT: 'nav.debugEml',
+}
+
+const navItems = computed(() => authStore.visibleMenus)
+const brandTarget = computed(() => authStore.firstMenuPath ?? '/reservation/orders')
+const currentUserLabel = computed(() => authStore.user?.display_name || authStore.user?.username || '-')
+const currentHotelLabel = computed(() => {
+  const hotel = authStore.selectedHotel
+  return hotel?.hotel_name || hotel?.hotel_id || '-'
+})
+const hotelSwitchable = computed(() => authStore.hotels.length > 1 && authStore.hasPermission('HOTEL_SWITCH'))
 
 const pageTitle = computed(() => {
   const titleKey = typeof route.meta.titleKey === 'string' ? route.meta.titleKey : 'nav.orders'
@@ -148,6 +208,23 @@ function setLocale(nextLocale: SupportedLocale): void {
   locale.value = nextLocale
 }
 
+function menuLabel(item: AuthMenuResult): string {
+  const labelKey = menuLabelKeys[item.menu_code]
+  return labelKey ? t(labelKey) : item.menu_name
+}
+
+function changeHotel(event: Event): void {
+  const select = event.target
+  if (select instanceof HTMLSelectElement) {
+    authStore.setSelectedHotelId(select.value)
+  }
+}
+
+async function logout(): Promise<void> {
+  await authStore.logout()
+  await router.push('/login')
+}
+
 async function checkHealth(): Promise<void> {
   healthState.value = 'checking'
   try {
@@ -278,13 +355,49 @@ async function checkHealth(): Promise<void> {
 
 .health-pill,
 .locale-switch,
-.theme-button {
+.theme-button,
+.logout-button,
+.user-chip,
+.hotel-chip,
+.hotel-select {
   min-height: 36px;
   border: 1px solid var(--th-color-slate-200);
   border-radius: var(--th-radius-sm);
   background: var(--th-color-white);
 }
 
+.auth-context {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.user-chip,
+.hotel-chip,
+.hotel-select {
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+  color: var(--th-color-slate-700);
+  font-size: 12px;
+  font-weight: 800;
+  padding: 0 10px;
+  white-space: nowrap;
+}
+
+.hotel-select {
+  padding-right: 6px;
+}
+
+.hotel-select select {
+  max-width: 150px;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  outline: 0;
+}
+
 .health-pill {
   display: inline-flex;
   align-items: center;
@@ -314,7 +427,8 @@ async function checkHealth(): Promise<void> {
 }
 
 .locale-switch button,
-.theme-button {
+.theme-button,
+.logout-button {
   border: 0;
   background: transparent;
   color: var(--th-color-slate-700);
@@ -334,7 +448,8 @@ async function checkHealth(): Promise<void> {
   color: var(--th-color-blue-600);
 }
 
-.theme-button {
+.theme-button,
+.logout-button {
   width: 38px;
 }
 
@@ -394,6 +509,14 @@ async function checkHealth(): Promise<void> {
     display: none;
   }
 
+  .auth-context {
+    max-width: 100%;
+  }
+
+  .user-chip {
+    display: none;
+  }
+
   .app-content {
     padding: 18px;
   }
@@ -438,7 +561,8 @@ async function checkHealth(): Promise<void> {
     min-width: 0;
   }
 
-  .theme-button {
+  .theme-button,
+  .logout-button {
     flex: 0 0 38px;
   }
 
diff --git a/client/src/main.ts b/client/src/main.ts
index 2c25ba9..84a5ef4 100644
--- a/client/src/main.ts
+++ b/client/src/main.ts
@@ -6,13 +6,32 @@ import { VueQueryPlugin } from '@tanstack/vue-query'
 import 'primeicons/primeicons.css'
 
 import App from './App.vue'
+import { setReservationHotelIdProvider } from './config/reservationConfig'
 import { i18n } from './i18n'
 import { router } from './router'
+import { setUnauthorizedHandler } from './services/httpClient'
+import { useAuthStore } from './stores/authStore'
 import './styles/main.css'
 
 const app = createApp(App)
+const pinia = createPinia()
+const authStore = useAuthStore(pinia)
 
-app.use(createPinia())
+setReservationHotelIdProvider(() => authStore.selectedHotelId)
+setUnauthorizedHandler(() => {
+  const currentPath = router.currentRoute.value.fullPath
+  authStore.clearAuth()
+  if (!currentPath.startsWith('/login')) {
+    void router.push({
+      path: '/login',
+      query: {
+        redirect: currentPath,
+      },
+    })
+  }
+})
+
+app.use(pinia)
 app.use(router)
 app.use(i18n)
 app.use(VueQueryPlugin)
diff --git a/client/src/router/index.ts b/client/src/router/index.ts
index 6e4a1c2..75b2405 100644
--- a/client/src/router/index.ts
+++ b/client/src/router/index.ts
@@ -1,11 +1,42 @@
-import { createRouter, createWebHistory } from 'vue-router'
+import { createRouter, createWebHistory, type RouteLocationNormalized } from 'vue-router'
+
+import { useAuthStore } from '@/stores/authStore'
+import type { AuthPermissionCode } from '@/types/auth'
+
+type AuthStore = ReturnType<typeof useAuthStore>
+type AppRouteMeta = {
+  public?: boolean
+  layout?: 'plain' | 'app'
+  permission?: AuthPermissionCode
+}
 
 export const router = createRouter({
   history: createWebHistory(),
   routes: [
     {
       path: '/',
-      redirect: '/reservation/orders',
+      redirect: () => {
+        const authStore = useAuthStore()
+        return authStore.firstMenuPath ?? '/reservation/orders'
+      },
+    },
+    {
+      path: '/login',
+      name: 'login',
+      component: () => import('@/views/auth/LoginView.vue'),
+      meta: {
+        public: true,
+        layout: 'plain',
+        titleKey: 'auth.loginTitle',
+      },
+    },
+    {
+      path: '/unauthorized',
+      name: 'unauthorized',
+      component: () => import('@/views/auth/UnauthorizedView.vue'),
+      meta: {
+        titleKey: 'auth.unauthorizedTitle',
+      },
     },
     {
       path: '/reservation/workbench',
@@ -17,6 +48,7 @@ export const router = createRouter({
       component: () => import('@/views/reservation/ReservationOrderListView.vue'),
       meta: {
         titleKey: 'nav.orders',
+        permission: 'RESERVATION_ORDER_READ',
       },
     },
     {
@@ -25,6 +57,7 @@ export const router = createRouter({
       component: () => import('@/views/reservation/ReservationTaskListView.vue'),
       meta: {
         titleKey: 'nav.taskQueue',
+        permission: 'RESERVATION_TASK_READ',
       },
     },
     {
@@ -33,6 +66,7 @@ export const router = createRouter({
       component: () => import('@/views/reservation/ReservationOrderDetailView.vue'),
       meta: {
         titleKey: 'nav.orderDetail',
+        permission: 'RESERVATION_ORDER_READ',
       },
     },
     {
@@ -41,6 +75,7 @@ export const router = createRouter({
       component: () => import('@/views/reservation/ReservationTaskDetailView.vue'),
       meta: {
         titleKey: 'nav.taskDetail',
+        permission: 'RESERVATION_TASK_READ',
       },
     },
     {
@@ -49,6 +84,7 @@ export const router = createRouter({
       component: () => import('@/views/reservation/ReservationSourceMessageConversationView.vue'),
       meta: {
         titleKey: 'nav.sourceMessageConversation',
+        permission: 'SOURCE_MESSAGE_ORIGINAL_READ',
       },
     },
     {
@@ -57,7 +93,55 @@ export const router = createRouter({
       component: () => import('@/views/debug/DebugEmlSuperAgentRunView.vue'),
       meta: {
         titleKey: 'debugEml.title',
+        permission: 'SYSTEM_DEBUG_EML_RUN',
       },
     },
   ],
 })
+
+router.beforeEach(createAuthGuard())
+
+export function createAuthGuard(resolveAuthStore: () => AuthStore = () => useAuthStore()) {
+  return async (to: RouteLocationNormalized) => {
+    const authStore = resolveAuthStore()
+    const meta = to.meta as AppRouteMeta
+
+    if (!authStore.restoreAttempted && authStore.hasStoredToken()) {
+      await authStore.restoreFromSession()
+    }
+
+    if (meta.public) {
+      if (to.name === 'login' && authStore.isAuthenticated) {
+        return safeRedirectPath(to.query.redirect) ?? authStore.firstMenuPath ?? '/reservation/orders'
+      }
+      return true
+    }
+
+    if (!authStore.isAuthenticated) {
+      return {
+        path: '/login',
+        query: {
+          redirect: to.fullPath,
+        },
+      }
+    }
+
+    if (meta.permission && !authStore.hasPermission(meta.permission)) {
+      return {
+        name: 'unauthorized',
+      }
+    }
+
+    return true
+  }
+}
+
+function safeRedirectPath(redirect: unknown): string | null {
+  if (typeof redirect !== 'string') {
+    return null
+  }
+  if (!redirect.startsWith('/') || redirect.startsWith('//') || redirect.startsWith('/login')) {
+    return null
+  }
+  return redirect
+}
diff --git a/client/src/services/authService.ts b/client/src/services/authService.ts
new file mode 100644
index 0000000..af289d7
--- /dev/null
+++ b/client/src/services/authService.ts
@@ -0,0 +1,14 @@
+import { getJson, sendJson } from '@/services/httpClient'
+import type { AuthLoginRequest, AuthLoginResult, AuthLogoutResult, AuthMeResult } from '@/types/auth'
+
+export function loginAuth(request: AuthLoginRequest): Promise<AuthLoginResult> {
+  return sendJson<AuthLoginResult>('/api/auth/login', 'POST', request)
+}
+
+export function fetchCurrentAuth(): Promise<AuthMeResult> {
+  return getJson<AuthMeResult>('/api/auth/me')
+}
+
+export function logoutAuth(): Promise<AuthLogoutResult> {
+  return sendJson<AuthLogoutResult>('/api/auth/logout', 'POST')
+}
diff --git a/client/src/services/authSession.ts b/client/src/services/authSession.ts
new file mode 100644
index 0000000..71568bf
--- /dev/null
+++ b/client/src/services/authSession.ts
@@ -0,0 +1,28 @@
+export const ACCESS_TOKEN_STORAGE_KEY = 'th_hotel_access_token'
+
+let memoryAccessToken: string | null = null
+
+export function getStoredAccessToken(): string | null {
+  const storage = getSessionStorage()
+  if (!storage) {
+    return memoryAccessToken
+  }
+  return storage.getItem(ACCESS_TOKEN_STORAGE_KEY)
+}
+
+export function setStoredAccessToken(token: string): void {
+  memoryAccessToken = token
+  getSessionStorage()?.setItem(ACCESS_TOKEN_STORAGE_KEY, token)
+}
+
+export function clearStoredAccessToken(): void {
+  memoryAccessToken = null
+  getSessionStorage()?.removeItem(ACCESS_TOKEN_STORAGE_KEY)
+}
+
+function getSessionStorage(): Storage | null {
+  if (typeof window === 'undefined') {
+    return null
+  }
+  return window.sessionStorage
+}
diff --git a/client/src/services/debugEmlService.ts b/client/src/services/debugEmlService.ts
index d8cddb8..2ef757b 100644
--- a/client/src/services/debugEmlService.ts
+++ b/client/src/services/debugEmlService.ts
@@ -4,6 +4,7 @@ import type {
   DebugEmlSuperAgentRunResult,
   DebugEmlUploadInput,
 } from '@/types/debugEml'
+import { getStoredAccessToken } from '@/services/authSession'
 
 const apiBaseUrl = import.meta.env.VITE_API_BASE_URL ?? ''
 const debugEmlEndpoint = '/api/system/debug/eml-superagent-runs'
@@ -35,10 +36,7 @@ export async function uploadDebugEmlSuperAgentRun(
 
   const response = await fetch(`${apiBaseUrl}${debugEmlEndpoint}`, {
     method: 'POST',
-    headers: {
-      Accept: 'application/json',
-      'X-TH-Hotel-Debug-Upload-Key': input.debugUploadKey.trim(),
-    },
+    headers: buildUploadHeaders(input.debugUploadKey),
     body: form,
   })
 
@@ -56,6 +54,18 @@ export async function uploadDebugEmlSuperAgentRun(
   return normalizeDebugEmlResult(payload)
 }
 
+function buildUploadHeaders(debugUploadKey: string): Record<string, string> {
+  const headers: Record<string, string> = {
+    Accept: 'application/json',
+    'X-TH-Hotel-Debug-Upload-Key': debugUploadKey.trim(),
+  }
+  const token = getStoredAccessToken()
+  if (token) {
+    headers.Authorization = `Bearer ${token}`
+  }
+  return headers
+}
+
 async function readResponsePayload(response: Response): Promise<unknown> {
   const contentType = response.headers.get('content-type') ?? ''
   if (!contentType.includes('application/json')) {
diff --git a/client/src/services/httpClient.ts b/client/src/services/httpClient.ts
index 9471f6e..c1f1942 100644
--- a/client/src/services/httpClient.ts
+++ b/client/src/services/httpClient.ts
@@ -1,4 +1,11 @@
+import { getStoredAccessToken } from '@/services/authSession'
+
 const apiBaseUrl = import.meta.env.VITE_API_BASE_URL ?? ''
+const authUnauthorizedErrorCodes = new Set(['AUTH_TOKEN_REQUIRED', 'AUTH_SESSION_INVALID'])
+
+type UnauthorizedHandler = (() => void) | null
+
+let unauthorizedHandler: UnauthorizedHandler = null
 
 export class ApiError extends Error {
   readonly status: number
@@ -28,23 +35,78 @@ export async function sendJson<T>(path: string, method: 'POST' | 'PUT', body?: u
   })
 }
 
+export function setUnauthorizedHandler(handler: UnauthorizedHandler): void {
+  unauthorizedHandler = handler
+}
+
 async function requestJson<T>(path: string, init: RequestInit): Promise<T> {
   const response = await fetch(`${apiBaseUrl}${path}`, {
     ...init,
-    headers: {
-      Accept: 'application/json',
-      ...init.headers,
-    },
+    headers: buildRequestHeaders(init.headers),
   })
 
   const payload = await readResponsePayload(response)
   if (!response.ok) {
+    if (isAuthUnauthorized(response.status, payload)) {
+      unauthorizedHandler?.()
+    }
     throw new ApiError(`Request failed with status ${response.status}`, response.status, payload)
   }
 
   return payload as T
 }
 
+function buildRequestHeaders(initHeaders?: HeadersInit): Record<string, string> {
+  const headers: Record<string, string> = {
+    Accept: 'application/json',
+  }
+  mergeHeaders(headers, initHeaders)
+
+  const token = getStoredAccessToken()
+  if (token) {
+    headers.Authorization = `Bearer ${token}`
+  }
+  return headers
+}
+
+function mergeHeaders(target: Record<string, string>, source?: HeadersInit): void {
+  if (!source) {
+    return
+  }
+  if (source instanceof Headers) {
+    source.forEach((value, key) => {
+      target[key] = value
+    })
+    return
+  }
+  if (Array.isArray(source)) {
+    source.forEach(([key, value]) => {
+      target[key] = value
+    })
+    return
+  }
+  Object.entries(source).forEach(([key, value]) => {
+    if (typeof value === 'string') {
+      target[key] = value
+    }
+  })
+}
+
+function isAuthUnauthorized(status: number, payload: unknown): boolean {
+  if (authUnauthorizedErrorCodes.has(errorCodeFromPayload(payload))) {
+    return true
+  }
+  return status === 401 && errorCodeFromPayload(payload) !== 'AUTH_INVALID_CREDENTIALS'
+}
+
+function errorCodeFromPayload(payload: unknown): string {
+  if (typeof payload !== 'object' || payload === null || Array.isArray(payload)) {
+    return ''
+  }
+  const value = (payload as { error_code?: unknown }).error_code
+  return typeof value === 'string' ? value : ''
+}
+
 async function readResponsePayload(response: Response): Promise<unknown> {
   const contentType = response.headers.get('content-type') ?? ''
   if (!contentType.includes('application/json')) {
diff --git a/client/src/services/reservationService.ts b/client/src/services/reservationService.ts
index 403a0a9..78a4367 100644
--- a/client/src/services/reservationService.ts
+++ b/client/src/services/reservationService.ts
@@ -2,7 +2,7 @@ import {
   reservationTaskAudits,
   reservationTaskDetails,
 } from '@/fixtures/reservation'
-import { reservationHotelId } from '@/config/reservationConfig'
+import { getReservationHotelId } from '@/config/reservationConfig'
 import { getJson, sendJson } from '@/services/httpClient'
 import type {
   ReservationManualReviewConversionRequest,
@@ -38,7 +38,7 @@ export async function fetchReservationTaskList(
 export async function fetchReservationOrderDetail(orderId: string): Promise<ReservationOrderDetailResult> {
   return getJson<ReservationOrderDetailResult>(
     withQuery(`/api/reservation/orders/${encodeURIComponent(orderId)}`, {
-      hotel_id: reservationHotelId,
+      hotel_id: getReservationHotelId(),
       include_tasks: true,
       include_source_summary: true,
     }),
@@ -152,7 +152,7 @@ function withQuery(path: string, params: object): string {
 
 function withReservationHotel<T extends { hotel_id?: string }>(filters: T): T {
   return {
-    hotel_id: reservationHotelId,
+    hotel_id: getReservationHotelId(),
     ...filters,
   }
 }
diff --git a/client/src/stores/authStore.ts b/client/src/stores/authStore.ts
new file mode 100644
index 0000000..0eafbfa
--- /dev/null
+++ b/client/src/stores/authStore.ts
@@ -0,0 +1,146 @@
+import { defineStore } from 'pinia'
+
+import { fetchCurrentAuth, loginAuth, logoutAuth } from '@/services/authService'
+import { clearStoredAccessToken, getStoredAccessToken, setStoredAccessToken } from '@/services/authSession'
+import type {
+  AuthHotelResult,
+  AuthLoginRequest,
+  AuthLoginResult,
+  AuthMeResult,
+  AuthMenuResult,
+  AuthPermissionCode,
+  AuthUserResult,
+} from '@/types/auth'
+
+interface AuthState {
+  accessToken: string | null
+  user: AuthUserResult | null
+  defaultHotelId: string | null
+  hotels: AuthHotelResult[]
+  permissions: AuthPermissionCode[]
+  menus: AuthMenuResult[]
+  selectedHotelId: string | null
+  restoreAttempted: boolean
+  restoring: boolean
+}
+
+export const useAuthStore = defineStore('auth', {
+  state: (): AuthState => ({
+    accessToken: getStoredAccessToken(),
+    user: null,
+    defaultHotelId: null,
+    hotels: [],
+    permissions: [],
+    menus: [],
+    selectedHotelId: null,
+    restoreAttempted: false,
+    restoring: false,
+  }),
+  getters: {
+    isAuthenticated: (state) => Boolean(state.accessToken && state.user),
+    selectedHotel: (state) =>
+      state.hotels.find((hotel) => hotel.hotel_id === state.selectedHotelId) ?? state.hotels[0] ?? null,
+    visibleMenus: (state) =>
+      [...state.menus]
+        .filter((menu) => Boolean(menu.route_path))
+        .sort((left, right) => (left.sort_order ?? 0) - (right.sort_order ?? 0)),
+    firstMenuPath(): string | null {
+      return this.visibleMenus[0]?.route_path ?? null
+    },
+  },
+  actions: {
+    hasPermission(permission: AuthPermissionCode): boolean {
+      return this.permissions.includes(permission)
+    },
+    hasStoredToken(): boolean {
+      return Boolean(getStoredAccessToken())
+    },
+    async login(request: AuthLoginRequest): Promise<AuthLoginResult> {
+      const result = await loginAuth(request)
+      this.applyLoginResult(result)
+      return result
+    },
+    async restoreFromSession(): Promise<boolean> {
+      if (this.restoreAttempted && this.isAuthenticated) {
+        return true
+      }
+      const token = getStoredAccessToken()
+      if (!token) {
+        this.clearAuth()
+        this.restoreAttempted = true
+        return false
+      }
+
+      this.accessToken = token
+      this.restoring = true
+      try {
+        const result = await fetchCurrentAuth()
+        this.applyAuthContext(result)
+        this.restoreAttempted = true
+        return true
+      } catch {
+        this.clearAuth()
+        this.restoreAttempted = true
+        return false
+      } finally {
+        this.restoring = false
+      }
+    },
+    async logout(): Promise<void> {
+      try {
+        if (this.accessToken) {
+          await logoutAuth()
+        }
+      } catch {
+        // 本地退出必须完成；后端登出失败时不保留过期 token 或用户上下文。
+      } finally {
+        this.clearAuth()
+        this.restoreAttempted = true
+      }
+    },
+    applyLoginResult(result: AuthLoginResult): void {
+      this.accessToken = result.access_token
+      setStoredAccessToken(result.access_token)
+      this.applyAuthContext(result)
+      this.restoreAttempted = true
+    },
+    applyAuthContext(result: AuthMeResult): void {
+      this.user = result.user
+      this.defaultHotelId = result.default_hotel_id
+      this.hotels = result.hotels
+      this.permissions = result.permissions
+      this.menus = result.menus
+      this.selectedHotelId = resolveSelectedHotelId(result.hotels, result.default_hotel_id, this.selectedHotelId)
+    },
+    setSelectedHotelId(hotelId: string): void {
+      if (this.hotels.some((hotel) => hotel.hotel_id === hotelId)) {
+        this.selectedHotelId = hotelId
+      }
+    },
+    clearAuth(): void {
+      clearStoredAccessToken()
+      this.accessToken = null
+      this.user = null
+      this.defaultHotelId = null
+      this.hotels = []
+      this.permissions = []
+      this.menus = []
+      this.selectedHotelId = null
+      this.restoring = false
+    },
+  },
+})
+
+function resolveSelectedHotelId(
+  hotels: AuthHotelResult[],
+  defaultHotelId: string | null,
+  currentHotelId: string | null,
+): string | null {
+  if (currentHotelId && hotels.some((hotel) => hotel.hotel_id === currentHotelId)) {
+    return currentHotelId
+  }
+  if (defaultHotelId && hotels.some((hotel) => hotel.hotel_id === defaultHotelId)) {
+    return defaultHotelId
+  }
+  return hotels.find((hotel) => hotel.default_hotel)?.hotel_id ?? hotels[0]?.hotel_id ?? null
+}
diff --git a/client/src/tests/authService.spec.ts b/client/src/tests/authService.spec.ts
new file mode 100644
index 0000000..1aad7bd
--- /dev/null
+++ b/client/src/tests/authService.spec.ts
@@ -0,0 +1,125 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+import { fetchCurrentAuth, loginAuth, logoutAuth } from '@/services/authService'
+
+const jsonHeaders = {
+  headers: {
+    get: (name: string) => (name.toLowerCase() === 'content-type' ? 'application/json' : null),
+  },
+}
+
+function mockJsonResponse(payload: unknown, status = 200): Response {
+  return {
+    ok: status >= 200 && status < 300,
+    status,
+    json: async () => payload,
+    text: async () => JSON.stringify(payload),
+    ...jsonHeaders,
+  } as Response
+}
+
+function createAuthPayload() {
+  return {
+    access_token: 'session-token',
+    token_type: 'Bearer',
+    expires_at: '2026-07-09T12:00:00Z',
+    user: {
+      id: '1900000000000000001',
+      username: 'admin',
+      display_name: '系统管理员',
+      super_admin: true,
+    },
+    default_hotel_id: 'HOTEL-TEST',
+    hotels: [
+      {
+        hotel_id: 'HOTEL-TEST',
+        hotel_name: '测试酒店',
+        time_zone: 'Asia/Bangkok',
+        default_hotel: true,
+      },
+    ],
+    permissions: ['RESERVATION_ORDER_READ'],
+    menus: [
+      {
+        menu_code: 'RESERVATION_ORDERS',
+        menu_name: '订单列表',
+        route_path: '/reservation/orders',
+        component_key: 'ReservationOrders',
+        icon_key: 'pi pi-list',
+        permission_code: 'RESERVATION_ORDER_READ',
+        sort_order: 10,
+      },
+    ],
+  }
+}
+
+describe('authService', () => {
+  beforeEach(() => {
+    vi.restoreAllMocks()
+    sessionStorage.clear()
+  })
+
+  it('logs in with username, password, and optional preferred hotel id', async () => {
+    const fetchMock = vi.spyOn(globalThis, 'fetch').mockResolvedValue(mockJsonResponse(createAuthPayload()))
+
+    const result = await loginAuth({
+      username: 'admin',
+      password: 'Admin@123456',
+      preferred_hotel_id: 'HOTEL-TEST',
+    })
+
+    expect(fetchMock).toHaveBeenCalledWith(
+      '/api/auth/login',
+      expect.objectContaining({
+        method: 'POST',
+        headers: expect.objectContaining({
+          'Content-Type': 'application/json',
+        }),
+        body: JSON.stringify({
+          username: 'admin',
+          password: 'Admin@123456',
+          preferred_hotel_id: 'HOTEL-TEST',
+        }),
+      }),
+    )
+    expect(result.access_token).toBe('session-token')
+    expect(result.default_hotel_id).toBe('HOTEL-TEST')
+  })
+
+  it('restores the current user through auth me', async () => {
+    const fetchMock = vi.spyOn(globalThis, 'fetch').mockResolvedValue(mockJsonResponse(createAuthPayload()))
+    sessionStorage.setItem('th_hotel_access_token', 'session-token')
+
+    const result = await fetchCurrentAuth()
+
+    expect(fetchMock).toHaveBeenCalledWith(
+      '/api/auth/me',
+      expect.objectContaining({
+        method: 'GET',
+        headers: expect.objectContaining({
+          Authorization: 'Bearer session-token',
+        }),
+      }),
+    )
+    expect(result.user.username).toBe('admin')
+  })
+
+  it('logs out the current token without persisting secrets outside sessionStorage', async () => {
+    const fetchMock = vi.spyOn(globalThis, 'fetch').mockResolvedValue(mockJsonResponse({ success: true }))
+    sessionStorage.setItem('th_hotel_access_token', 'session-token')
+
+    const result = await logoutAuth()
+
+    expect(fetchMock).toHaveBeenCalledWith(
+      '/api/auth/logout',
+      expect.objectContaining({
+        method: 'POST',
+        headers: expect.objectContaining({
+          Authorization: 'Bearer session-token',
+        }),
+      }),
+    )
+    expect(result.success).toBe(true)
+    expect(localStorage.getItem('th_hotel_access_token')).toBeNull()
+  })
+})
diff --git a/client/src/tests/authStore.spec.ts b/client/src/tests/authStore.spec.ts
new file mode 100644
index 0000000..fb28723
--- /dev/null
+++ b/client/src/tests/authStore.spec.ts
@@ -0,0 +1,127 @@
+import { createPinia, setActivePinia } from 'pinia'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+import { useAuthStore } from '@/stores/authStore'
+
+vi.mock('@/services/authService', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('@/services/authService')>()
+  return {
+    ...actual,
+    fetchCurrentAuth: vi.fn(),
+    loginAuth: vi.fn(),
+    logoutAuth: vi.fn(),
+  }
+})
+
+const authService = await import('@/services/authService')
+
+function createAuthPayload(overrides: Record<string, unknown> = {}) {
+  return {
+    access_token: 'session-token',
+    token_type: 'Bearer',
+    expires_at: '2026-07-09T12:00:00Z',
+    user: {
+      id: '1900000000000000001',
+      username: 'admin',
+      display_name: '系统管理员',
+      super_admin: true,
+    },
+    default_hotel_id: 'HOTEL-TEST',
+    hotels: [
+      {
+        hotel_id: 'HOTEL-TEST',
+        hotel_name: '测试酒店',
+        time_zone: 'Asia/Bangkok',
+        default_hotel: true,
+      },
+      {
+        hotel_id: 'HOTEL-BKK',
+        hotel_name: '曼谷酒店',
+        time_zone: 'Asia/Bangkok',
+        default_hotel: false,
+      },
+    ],
+    permissions: ['RESERVATION_ORDER_READ', 'HOTEL_SWITCH'],
+    menus: [
+      {
+        menu_code: 'RESERVATION_ORDERS',
+        menu_name: '订单列表',
+        route_path: '/reservation/orders',
+        component_key: 'ReservationOrders',
+        icon_key: 'pi pi-list',
+        permission_code: 'RESERVATION_ORDER_READ',
+        sort_order: 10,
+      },
+    ],
+    ...overrides,
+  }
+}
+
+describe('authStore', () => {
+  beforeEach(() => {
+    setActivePinia(createPinia())
+    vi.mocked(authService.fetchCurrentAuth).mockReset()
+    vi.mocked(authService.loginAuth).mockReset()
+    vi.mocked(authService.logoutAuth).mockReset()
+    sessionStorage.clear()
+    localStorage.clear()
+  })
+
+  it('stores login token only in sessionStorage and applies default hotel context', async () => {
+    vi.mocked(authService.loginAuth).mockResolvedValue(createAuthPayload())
+    const store = useAuthStore()
+
+    await store.login({
+      username: 'admin',
+      password: 'Admin@123456',
+    })
+
+    expect(sessionStorage.getItem('th_hotel_access_token')).toBe('session-token')
+    expect(localStorage.getItem('th_hotel_access_token')).toBeNull()
+    expect(store.user?.username).toBe('admin')
+    expect(store.selectedHotelId).toBe('HOTEL-TEST')
+    expect(store.hasPermission('RESERVATION_ORDER_READ')).toBe(true)
+  })
+
+  it('restores auth state from an existing session token through auth me', async () => {
+    vi.mocked(authService.fetchCurrentAuth).mockResolvedValue(createAuthPayload({ access_token: undefined }))
+    sessionStorage.setItem('th_hotel_access_token', 'session-token')
+    const store = useAuthStore()
+
+    const restored = await store.restoreFromSession()
+
+    expect(restored).toBe(true)
+    expect(authService.fetchCurrentAuth).toHaveBeenCalledOnce()
+    expect(store.user?.display_name).toBe('系统管理员')
+    expect(store.selectedHotelId).toBe('HOTEL-TEST')
+  })
+
+  it('clears token and user context when restore fails', async () => {
+    vi.mocked(authService.fetchCurrentAuth).mockRejectedValue(new Error('AUTH_SESSION_INVALID'))
+    sessionStorage.setItem('th_hotel_access_token', 'expired-token')
+    const store = useAuthStore()
+
+    const restored = await store.restoreFromSession()
+
+    expect(restored).toBe(false)
+    expect(sessionStorage.getItem('th_hotel_access_token')).toBeNull()
+    expect(store.user).toBeNull()
+    expect(store.permissions).toEqual([])
+  })
+
+  it('clears local auth context even when backend logout fails', async () => {
+    vi.mocked(authService.loginAuth).mockResolvedValue(createAuthPayload())
+    vi.mocked(authService.logoutAuth).mockRejectedValue(new Error('network down'))
+    const store = useAuthStore()
+    await store.login({
+      username: 'admin',
+      password: 'Admin@123456',
+    })
+
+    await expect(store.logout()).resolves.toBeUndefined()
+
+    expect(sessionStorage.getItem('th_hotel_access_token')).toBeNull()
+    expect(store.user).toBeNull()
+    expect(store.permissions).toEqual([])
+  })
+})
diff --git a/client/src/tests/httpClientAuth.spec.ts b/client/src/tests/httpClientAuth.spec.ts
new file mode 100644
index 0000000..1a65045
--- /dev/null
+++ b/client/src/tests/httpClientAuth.spec.ts
@@ -0,0 +1,65 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+import { getJson, setUnauthorizedHandler } from '@/services/httpClient'
+
+const jsonHeaders = {
+  headers: {
+    get: (name: string) => (name.toLowerCase() === 'content-type' ? 'application/json' : null),
+  },
+}
+
+function mockJsonResponse(payload: unknown, status = 200): Response {
+  return {
+    ok: status >= 200 && status < 300,
+    status,
+    json: async () => payload,
+    text: async () => JSON.stringify(payload),
+    ...jsonHeaders,
+  } as Response
+}
+
+describe('httpClient auth integration', () => {
+  beforeEach(() => {
+    vi.restoreAllMocks()
+    sessionStorage.clear()
+    localStorage.clear()
+    setUnauthorizedHandler(null)
+  })
+
+  it('adds Authorization when a session token exists', async () => {
+    const fetchMock = vi.spyOn(globalThis, 'fetch').mockResolvedValue(mockJsonResponse({ ok: true }))
+    sessionStorage.setItem('th_hotel_access_token', 'session-token')
+
+    await getJson('/api/reservation/orders')
+
+    expect(fetchMock).toHaveBeenCalledWith(
+      '/api/reservation/orders',
+      expect.objectContaining({
+        headers: expect.objectContaining({
+          Authorization: 'Bearer session-token',
+        }),
+      }),
+    )
+  })
+
+  it('runs the unauthorized handler for invalid auth sessions', async () => {
+    const unauthorizedHandler = vi.fn()
+    setUnauthorizedHandler(unauthorizedHandler)
+    sessionStorage.setItem('th_hotel_access_token', 'expired-token')
+    vi.spyOn(globalThis, 'fetch').mockResolvedValue(
+      mockJsonResponse(
+        {
+          error_code: 'AUTH_SESSION_INVALID',
+          message: '登录已失效。',
+        },
+        401,
+      ),
+    )
+
+    await expect(getJson('/api/auth/me')).rejects.toMatchObject({
+      status: 401,
+    })
+
+    expect(unauthorizedHandler).toHaveBeenCalledOnce()
+  })
+})
diff --git a/client/src/tests/loginView.spec.ts b/client/src/tests/loginView.spec.ts
new file mode 100644
index 0000000..c88bca0
--- /dev/null
+++ b/client/src/tests/loginView.spec.ts
@@ -0,0 +1,134 @@
+import { flushPromises, mount } from '@vue/test-utils'
+import { createPinia, setActivePinia } from 'pinia'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { createI18n } from 'vue-i18n'
+import { createMemoryHistory, createRouter } from 'vue-router'
+
+import zhCN from '@/i18n/locales/zh-CN'
+import { ApiError } from '@/services/httpClient'
+import { useAuthStore } from '@/stores/authStore'
+import LoginView from '@/views/auth/LoginView.vue'
+
+vi.mock('@/services/authService', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('@/services/authService')>()
+  return {
+    ...actual,
+    loginAuth: vi.fn(),
+  }
+})
+
+const authService = await import('@/services/authService')
+
+function createAuthPayload() {
+  return {
+    access_token: 'session-token',
+    token_type: 'Bearer',
+    expires_at: '2026-07-09T12:00:00Z',
+    user: {
+      id: '1900000000000000001',
+      username: 'admin',
+      display_name: '系统管理员',
+      super_admin: true,
+    },
+    default_hotel_id: 'HOTEL-TEST',
+    hotels: [
+      {
+        hotel_id: 'HOTEL-TEST',
+        hotel_name: '测试酒店',
+        time_zone: 'Asia/Bangkok',
+        default_hotel: true,
+      },
+    ],
+    permissions: ['RESERVATION_ORDER_READ'],
+    menus: [
+      {
+        menu_code: 'RESERVATION_ORDERS',
+        menu_name: '订单列表',
+        route_path: '/reservation/orders',
+        component_key: 'ReservationOrders',
+        icon_key: 'pi pi-list',
+        permission_code: 'RESERVATION_ORDER_READ',
+        sort_order: 10,
+      },
+    ],
+  }
+}
+
+async function mountLoginView(redirect = '/reservation/orders') {
+  const pinia = createPinia()
+  setActivePinia(pinia)
+  const i18n = createI18n({
+    legacy: false,
+    locale: 'zh-CN',
+    messages: {
+      'zh-CN': zhCN,
+    },
+  })
+  const router = createRouter({
+    history: createMemoryHistory(),
+    routes: [
+      { path: '/login', component: LoginView },
+      { path: '/reservation/orders', component: { template: '<div />' } },
+      { path: '/reservation/tasks', component: { template: '<div />' } },
+    ],
+  })
+  await router.push({ path: '/login', query: { redirect } })
+  await router.isReady()
+
+  const wrapper = mount(LoginView, {
+    global: {
+      plugins: [pinia, i18n, router],
+    },
+  })
+
+  return {
+    wrapper,
+    router,
+    authStore: useAuthStore(),
+  }
+}
+
+describe('LoginView', () => {
+  beforeEach(() => {
+    vi.mocked(authService.loginAuth).mockReset()
+    sessionStorage.clear()
+    localStorage.clear()
+  })
+
+  it('logs in and redirects to the original protected route', async () => {
+    vi.mocked(authService.loginAuth).mockResolvedValue(createAuthPayload())
+    const { wrapper, router, authStore } = await mountLoginView('/reservation/tasks')
+
+    await wrapper.find('input[name="username"]').setValue('admin')
+    await wrapper.find('input[name="password"]').setValue('Admin@123456')
+    await wrapper.find('form').trigger('submit')
+    await flushPromises()
+
+    expect(authService.loginAuth).toHaveBeenCalledWith({
+      username: 'admin',
+      password: 'Admin@123456',
+      preferred_hotel_id: undefined,
+    })
+    expect(authStore.user?.username).toBe('admin')
+    expect(router.currentRoute.value.fullPath).toBe('/reservation/tasks')
+  })
+
+  it('shows a safe login failure message without storing the token', async () => {
+    vi.mocked(authService.loginAuth).mockRejectedValue(
+      new ApiError('用户名或密码错误。', 401, {
+        error_code: 'AUTH_INVALID_CREDENTIALS',
+        message: '用户名或密码错误。',
+      }),
+    )
+    const { wrapper } = await mountLoginView()
+
+    await wrapper.find('input[name="username"]').setValue('admin')
+    await wrapper.find('input[name="password"]').setValue('wrong-password')
+    await wrapper.find('form').trigger('submit')
+    await flushPromises()
+
+    expect(wrapper.text()).toContain('用户名或密码错误')
+    expect(sessionStorage.getItem('th_hotel_access_token')).toBeNull()
+    expect(localStorage.getItem('th_hotel_access_token')).toBeNull()
+  })
+})
diff --git a/client/src/tests/reservationAppShell.spec.ts b/client/src/tests/reservationAppShell.spec.ts
index 8025442..46bf833 100644
--- a/client/src/tests/reservationAppShell.spec.ts
+++ b/client/src/tests/reservationAppShell.spec.ts
@@ -1,13 +1,15 @@
 import { mount } from '@vue/test-utils'
-import { createPinia } from 'pinia'
+import { createPinia, setActivePinia } from 'pinia'
 import { createI18n } from 'vue-i18n'
 import { createMemoryHistory, createRouter } from 'vue-router'
-import { describe, expect, it, vi } from 'vitest'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
 
 import ReservationAppShell from '@/layouts/ReservationAppShell.vue'
 import enUS from '@/i18n/locales/en-US'
 import thTH from '@/i18n/locales/th-TH'
 import zhCN from '@/i18n/locales/zh-CN'
+import { useAuthStore } from '@/stores/authStore'
+import type { AuthMenuResult } from '@/types/auth'
 
 vi.mock('@/services/healthService', () => ({
   fetchBackendHealth: vi.fn().mockResolvedValue({
@@ -16,7 +18,68 @@ vi.mock('@/services/healthService', () => ({
   }),
 }))
 
-async function mountShell() {
+function createAuthPayload(menus: AuthMenuResult[]) {
+  return {
+    access_token: 'session-token',
+    token_type: 'Bearer',
+    expires_at: '2026-07-09T12:00:00Z',
+    user: {
+      id: '1900000000000000001',
+      username: 'admin',
+      display_name: '系统管理员',
+      super_admin: true,
+    },
+    default_hotel_id: 'HOTEL-TEST',
+    hotels: [
+      {
+        hotel_id: 'HOTEL-TEST',
+        hotel_name: '测试酒店',
+        time_zone: 'Asia/Bangkok',
+        default_hotel: true,
+      },
+    ],
+    permissions: ['RESERVATION_ORDER_READ', 'RESERVATION_TASK_READ'],
+    menus,
+  }
+}
+
+function createReservationOrdersMenu(): AuthMenuResult {
+  return {
+    menu_code: 'RESERVATION_ORDERS',
+    menu_name: '订单列表',
+    route_path: '/reservation/orders',
+    component_key: 'ReservationOrders',
+    icon_key: 'pi pi-list',
+    permission_code: 'RESERVATION_ORDER_READ',
+    sort_order: 10,
+  }
+}
+
+function createReservationTasksMenu(): AuthMenuResult {
+  return {
+    menu_code: 'RESERVATION_TASKS',
+    menu_name: '任务队列',
+    route_path: '/reservation/tasks',
+    component_key: 'ReservationTasks',
+    icon_key: 'pi pi-check-square',
+    permission_code: 'RESERVATION_TASK_READ',
+    sort_order: 20,
+  }
+}
+
+function createDebugMenu(): AuthMenuResult {
+  return {
+    menu_code: 'DEBUG_EML_SUPERAGENT',
+    menu_name: 'Debug EML',
+    route_path: '/debug/eml-superagent',
+    component_key: 'DebugEmlSuperAgent',
+    icon_key: 'pi pi-upload',
+    permission_code: 'SYSTEM_DEBUG_EML_RUN',
+    sort_order: 30,
+  }
+}
+
+async function mountShell(menus = [createReservationOrdersMenu(), createReservationTasksMenu()]) {
   const i18n = createI18n({
     legacy: false,
     locale: 'zh-CN',
@@ -47,12 +110,15 @@ async function mountShell() {
       },
     ],
   })
+  const pinia = createPinia()
+  setActivePinia(pinia)
+  useAuthStore().applyLoginResult(createAuthPayload(menus))
   await router.push('/reservation/orders')
   await router.isReady()
 
   return mount(ReservationAppShell, {
     global: {
-      plugins: [i18n, router, createPinia()],
+      plugins: [i18n, router, pinia],
     },
     slots: {
       default: '<section />',
@@ -61,6 +127,10 @@ async function mountShell() {
 }
 
 describe('ReservationAppShell', () => {
+  beforeEach(() => {
+    sessionStorage.clear()
+  })
+
   it('switches between Chinese, English, and Thai labels', async () => {
     const wrapper = await mountShell()
 
@@ -73,12 +143,25 @@ describe('ReservationAppShell', () => {
     expect(wrapper.text()).toContain('Order list')
   })
 
-  it('shows the Debug EML navigation entry before menu management takes over permissions', async () => {
+  it('renders navigation from backend menus and hides Debug EML when the menu is absent', async () => {
     const wrapper = await mountShell()
 
-    const debugLink = wrapper.find('a[href="/debug/eml-superagent"]')
+    expect(wrapper.find('a[href="/reservation/orders"]').exists()).toBe(true)
+    expect(wrapper.find('a[href="/reservation/tasks"]').exists()).toBe(true)
+    expect(wrapper.find('a[href="/debug/eml-superagent"]').exists()).toBe(false)
+  })
 
-    expect(debugLink.exists()).toBe(true)
-    expect(debugLink.text()).toContain('Debug EML')
+  it('shows Debug EML only when backend menus include it', async () => {
+    const wrapper = await mountShell([createReservationOrdersMenu(), createDebugMenu()])
+
+    expect(wrapper.find('a[href="/debug/eml-superagent"]').exists()).toBe(true)
+    expect(wrapper.text()).toContain('Debug EML')
+  })
+
+  it('shows current user and hotel context in the top bar', async () => {
+    const wrapper = await mountShell()
+
+    expect(wrapper.text()).toContain('系统管理员')
+    expect(wrapper.text()).toContain('测试酒店')
   })
 })
diff --git a/client/src/tests/reservationRouter.spec.ts b/client/src/tests/reservationRouter.spec.ts
index 14945c9..cd6ed10 100644
--- a/client/src/tests/reservationRouter.spec.ts
+++ b/client/src/tests/reservationRouter.spec.ts
@@ -1,9 +1,40 @@
 import { describe, expect, it } from 'vitest'
+import type { RouteLocationNormalized } from 'vue-router'
 
-import { router } from '@/router'
+import { createAuthGuard, router } from '@/router'
+import type { useAuthStore } from '@/stores/authStore'
+
+type AuthStoreForGuard = ReturnType<typeof useAuthStore>
+
+function createRoute(path: string, meta: Record<string, unknown> = {}): RouteLocationNormalized {
+  return {
+    fullPath: path,
+    path,
+    name: undefined,
+    params: {},
+    query: {},
+    hash: '',
+    matched: [],
+    meta,
+    redirectedFrom: undefined,
+  } as RouteLocationNormalized
+}
+
+function createAuthStoreForGuard(overrides: Partial<AuthStoreForGuard> = {}): AuthStoreForGuard {
+  return {
+    restoreAttempted: true,
+    isAuthenticated: true,
+    firstMenuPath: '/reservation/orders',
+    hasStoredToken: () => false,
+    restoreFromSession: async () => true,
+    hasPermission: () => true,
+    ...overrides,
+  } as unknown as AuthStoreForGuard
+}
 
 describe('reservation router', () => {
   it('exposes the P0 frontend routes', () => {
+    expect(router.resolve('/login').name).toBe('login')
     expect(router.resolve('/reservation/orders').name).toBe('reservation-order-list')
     expect(router.resolve('/reservation/tasks').name).toBe('reservation-task-list')
     expect(router.resolve('/reservation/orders/20001').name).toBe('reservation-order-detail')
@@ -16,4 +47,42 @@ describe('reservation router', () => {
   it('exposes the Debug EML route', () => {
     expect(router.resolve('/debug/eml-superagent').name).toBe('debug-eml-superagent')
   })
+
+  it('declares permissions for protected P0 routes', () => {
+    expect(router.resolve('/reservation/orders').meta.permission).toBe('RESERVATION_ORDER_READ')
+    expect(router.resolve('/reservation/orders/20001').meta.permission).toBe('RESERVATION_ORDER_READ')
+    expect(router.resolve('/reservation/tasks').meta.permission).toBe('RESERVATION_TASK_READ')
+    expect(router.resolve('/reservation/tasks/10001').meta.permission).toBe('RESERVATION_TASK_READ')
+    expect(router.resolve('/reservation/source-messages/30001/conversation').meta.permission).toBe(
+      'SOURCE_MESSAGE_ORIGINAL_READ',
+    )
+    expect(router.resolve('/debug/eml-superagent').meta.permission).toBe('SYSTEM_DEBUG_EML_RUN')
+  })
+
+  it('redirects anonymous users to login with the protected target as redirect', async () => {
+    const guard = createAuthGuard(() =>
+      createAuthStoreForGuard({
+        isAuthenticated: false,
+      }),
+    )
+
+    await expect(guard(createRoute('/reservation/orders', { permission: 'RESERVATION_ORDER_READ' }))).resolves.toEqual({
+      path: '/login',
+      query: {
+        redirect: '/reservation/orders',
+      },
+    })
+  })
+
+  it('redirects authenticated users without route permission to the unauthorized page', async () => {
+    const guard = createAuthGuard(() =>
+      createAuthStoreForGuard({
+        hasPermission: () => false,
+      }),
+    )
+
+    await expect(guard(createRoute('/debug/eml-superagent', { permission: 'SYSTEM_DEBUG_EML_RUN' }))).resolves.toEqual({
+      name: 'unauthorized',
+    })
+  })
 })
diff --git a/client/src/tests/reservationService.spec.ts b/client/src/tests/reservationService.spec.ts
index d147f03..b23b5df 100644
--- a/client/src/tests/reservationService.spec.ts
+++ b/client/src/tests/reservationService.spec.ts
@@ -8,6 +8,7 @@ import {
   fetchReservationTaskList,
   fetchSourceMessageConversation,
 } from '@/services/reservationService'
+import { setReservationHotelIdProvider } from '@/config/reservationConfig'
 
 const jsonHeaders = {
   headers: {
@@ -28,6 +29,7 @@ function mockJsonResponse(payload: unknown): Response {
 describe('reservationService real API mode', () => {
   beforeEach(() => {
     vi.restoreAllMocks()
+    setReservationHotelIdProvider(null)
   })
 
   it('fetches the task list from the backend by default', async () => {
@@ -102,6 +104,30 @@ describe('reservationService real API mode', () => {
     )
   })
 
+  it('uses the selected auth hotel before falling back to the environment hotel id', async () => {
+    const fetchMock = vi.spyOn(globalThis, 'fetch').mockResolvedValue(
+      mockJsonResponse({
+        items: [],
+        page: {
+          page_num: 1,
+          page_size: 20,
+          total: 0,
+        },
+      }),
+    )
+    setReservationHotelIdProvider(() => 'HOTEL-BKK')
+
+    await fetchReservationTaskList({
+      page_num: 1,
+      page_size: 20,
+    })
+
+    expect(fetchMock).toHaveBeenCalledWith(
+      '/api/reservation/tasks?hotel_id=HOTEL-BKK&page_num=1&page_size=20',
+      expect.objectContaining({ method: 'GET' }),
+    )
+  })
+
   it('fetches the order list from the backend by default', async () => {
     const fetchMock = vi.spyOn(globalThis, 'fetch').mockResolvedValue(
       mockJsonResponse({
diff --git a/client/src/tests/reservationTaskDetailPanel.spec.ts b/client/src/tests/reservationTaskDetailPanel.spec.ts
index 4881781..a8ce416 100644
--- a/client/src/tests/reservationTaskDetailPanel.spec.ts
+++ b/client/src/tests/reservationTaskDetailPanel.spec.ts
@@ -1,10 +1,12 @@
 import { flushPromises, mount, type VueWrapper } from '@vue/test-utils'
+import { createPinia, setActivePinia } from 'pinia'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { createI18n } from 'vue-i18n'
 import { createMemoryHistory, createRouter } from 'vue-router'
 
 import zhCN from '@/i18n/locales/zh-CN'
 import ReservationTaskDetailPanel from '@/components/reservation/ReservationTaskDetailPanel.vue'
+import { useAuthStore } from '@/stores/authStore'
 import type {
   ReservationManualReviewConversionResult,
   ReservationOrderListItem,
@@ -163,7 +165,40 @@ function createRequiredField(overrides: Partial<ReservationTaskFieldResult> = {}
   }
 }
 
-async function mountPanel() {
+function createAuthPayload(permissions: string[]) {
+  return {
+    access_token: 'session-token',
+    token_type: 'Bearer',
+    expires_at: '2026-07-09T12:00:00Z',
+    user: {
+      id: '1900000000000000001',
+      username: 'admin',
+      display_name: '系统管理员',
+      super_admin: true,
+    },
+    default_hotel_id: 'HOTEL-TEST',
+    hotels: [
+      {
+        hotel_id: 'HOTEL-TEST',
+        hotel_name: '测试酒店',
+        time_zone: 'Asia/Bangkok',
+        default_hotel: true,
+      },
+    ],
+    permissions,
+    menus: [],
+  }
+}
+
+const defaultTaskPermissions = [
+  'RESERVATION_TASK_READ',
+  'RESERVATION_TASK_EDIT',
+  'RESERVATION_TASK_CONFIRM',
+  'RESERVATION_OPERA_SIM_EXECUTE',
+  'RESERVATION_AUDIT_READ',
+]
+
+async function mountPanel(permissions = defaultTaskPermissions) {
   const i18n = createI18n({
     legacy: false,
     locale: 'zh-CN',
@@ -179,6 +214,9 @@ async function mountPanel() {
       { path: '/reservation/source-messages/:sourceMessageId/conversation', component: { template: '<div />' } },
     ],
   })
+  const pinia = createPinia()
+  setActivePinia(pinia)
+  useAuthStore().applyLoginResult(createAuthPayload(permissions))
   await router.push('/reservation/tasks/10001')
   await router.isReady()
 
@@ -187,7 +225,7 @@ async function mountPanel() {
       taskId: '10001',
     },
     global: {
-      plugins: [i18n, router],
+      plugins: [i18n, router, pinia],
       stubs: {
         RouterLink: {
           template: '<a><slot /></a>',
@@ -222,6 +260,7 @@ describe('ReservationTaskDetailPanel', () => {
     })
     vi.mocked(service.fetchReservationOrders).mockResolvedValue(createOrderCandidateResult([]))
     vi.mocked(service.convertReservationManualReviewTask).mockResolvedValue(createManualReviewConversionResult())
+    sessionStorage.clear()
   })
 
   it('shows draft save errors instead of leaving an unhandled rejection', async () => {
@@ -500,4 +539,45 @@ describe('ReservationTaskDetailPanel', () => {
       target_order_id: '20002',
     })
   })
+
+  it('hides task processing buttons and audit timeline without permissions', async () => {
+    vi.mocked(service.fetchReservationTaskAudits).mockResolvedValue({
+      task_id: '10001',
+      items: [createAudit('audit-1', 'TASK_LOADED')],
+    })
+    vi.mocked(service.fetchReservationTaskDetail).mockResolvedValue(
+      createTaskDetail({
+        availability: {
+          blocked: false,
+          read_only: false,
+          editable: true,
+          confirmable: true,
+          executable: true,
+          blocked_by_task_id: null,
+          blocked_reason: null,
+        },
+        opera_operations: [
+          {
+            operation_id: 'op-1',
+            task_id: '10001',
+            operation_sequence: 1,
+            operation_code: 'CREATE_RESERVATION',
+            operation_name: 'Create reservation',
+            operation_status: 'PENDING',
+            attempt_count: 0,
+            last_error_message: null,
+            attempts: [],
+          },
+        ],
+      }),
+    )
+
+    const wrapper = await mountPanel(['RESERVATION_TASK_READ'])
+
+    expect(wrapper.text()).not.toContain('保存草稿')
+    expect(wrapper.text()).not.toContain('确认任务')
+    expect(wrapper.text()).not.toContain('审计时间线')
+    expect(wrapper.find('button[title="执行"]').exists()).toBe(false)
+    expect(wrapper.find('button[title="重试"]').exists()).toBe(false)
+  })
 })
diff --git a/client/src/types/auth.ts b/client/src/types/auth.ts
new file mode 100644
index 0000000..a5fa35b
--- /dev/null
+++ b/client/src/types/auth.ts
@@ -0,0 +1,70 @@
+export type AuthPermissionCode =
+  | 'SOURCE_MESSAGE_READ'
+  | 'SOURCE_MESSAGE_ORIGINAL_READ'
+  | 'RESERVATION_ORDER_READ'
+  | 'RESERVATION_TASK_READ'
+  | 'RESERVATION_TASK_EDIT'
+  | 'RESERVATION_TASK_CONFIRM'
+  | 'RESERVATION_OPERA_SIM_EXECUTE'
+  | 'RESERVATION_AUDIT_READ'
+  | 'HOTEL_SWITCH'
+  | 'SYSTEM_AUTH_READ'
+  | 'SYSTEM_USER_MANAGE'
+  | 'SYSTEM_ROLE_MANAGE'
+  | 'SYSTEM_MENU_MANAGE'
+  | 'HOTEL_MANAGE'
+  | 'SYSTEM_DEBUG_EML_RUN'
+  | (string & {})
+
+export interface AuthLoginRequest {
+  username: string
+  password: string
+  preferred_hotel_id?: string
+}
+
+export interface AuthUserResult {
+  id: string
+  username: string
+  display_name: string
+  super_admin: boolean
+}
+
+export interface AuthHotelResult {
+  hotel_id: string
+  hotel_name: string
+  time_zone: string
+  default_hotel: boolean | null
+}
+
+export interface AuthMenuResult {
+  menu_code: string
+  menu_name: string
+  route_path: string
+  component_key: string | null
+  icon_key: string | null
+  permission_code: AuthPermissionCode | null
+  sort_order: number | null
+}
+
+export interface AuthMeResult {
+  user: AuthUserResult
+  default_hotel_id: string | null
+  hotels: AuthHotelResult[]
+  permissions: AuthPermissionCode[]
+  menus: AuthMenuResult[]
+}
+
+export interface AuthLoginResult extends AuthMeResult {
+  access_token: string
+  token_type: string
+  expires_at: string
+}
+
+export interface AuthLogoutResult {
+  success: boolean
+}
+
+export interface AuthErrorResponse {
+  error_code?: string
+  message?: string
+}
diff --git a/client/src/views/auth/LoginView.vue b/client/src/views/auth/LoginView.vue
new file mode 100644
index 0000000..0dfe488
--- /dev/null
+++ b/client/src/views/auth/LoginView.vue
@@ -0,0 +1,240 @@
+<template>
+  <main class="login-page">
+    <section class="login-panel">
+      <div class="login-brand">
+        <span class="login-brand__mark" />
+        <div>
+          <strong>{{ t('app.name') }}</strong>
+          <small>OMS</small>
+        </div>
+      </div>
+
+      <header>
+        <h1>{{ t('auth.loginTitle') }}</h1>
+        <p>{{ t('auth.loginSubtitle') }}</p>
+      </header>
+
+      <form
+        class="login-form"
+        @submit.prevent="submitLogin"
+      >
+        <label>
+          <span>{{ t('auth.username') }}</span>
+          <input
+            v-model.trim="username"
+            name="username"
+            type="text"
+            autocomplete="username"
+            :disabled="submitting"
+          >
+        </label>
+        <label>
+          <span>{{ t('auth.password') }}</span>
+          <input
+            v-model="password"
+            name="password"
+            type="password"
+            autocomplete="current-password"
+            :disabled="submitting"
+          >
+        </label>
+
+        <p
+          v-if="errorMessage"
+          class="login-error"
+        >
+          {{ errorMessage }}
+        </p>
+
+        <button
+          type="submit"
+          class="login-submit"
+          :disabled="submitting || !username || !password"
+        >
+          <i
+            class="pi pi-sign-in"
+            aria-hidden="true"
+          />
+          {{ submitting ? t('auth.loggingIn') : t('auth.loginSubmit') }}
+        </button>
+      </form>
+    </section>
+  </main>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useRoute, useRouter } from 'vue-router'
+
+import { ApiError } from '@/services/httpClient'
+import { useAuthStore } from '@/stores/authStore'
+
+const { t } = useI18n()
+const route = useRoute()
+const router = useRouter()
+const authStore = useAuthStore()
+
+const username = ref('')
+const password = ref('')
+const submitting = ref(false)
+const errorMessage = ref('')
+const preferredHotelId = computed(() => authStore.selectedHotelId ?? undefined)
+
+async function submitLogin(): Promise<void> {
+  errorMessage.value = ''
+  submitting.value = true
+  try {
+    await authStore.login({
+      username: username.value,
+      password: password.value,
+      preferred_hotel_id: preferredHotelId.value,
+    })
+    await router.push(resolveRedirectPath())
+  } catch (error) {
+    errorMessage.value = loginErrorMessage(error)
+  } finally {
+    submitting.value = false
+  }
+}
+
+function resolveRedirectPath(): string {
+  const redirect = route.query.redirect
+  if (typeof redirect === 'string' && redirect.startsWith('/') && !redirect.startsWith('//')) {
+    return redirect === '/login' ? authStore.firstMenuPath ?? '/reservation/orders' : redirect
+  }
+  return authStore.firstMenuPath ?? '/reservation/orders'
+}
+
+function loginErrorMessage(error: unknown): string {
+  if (error instanceof ApiError && isErrorRecord(error.details) && typeof error.details.message === 'string') {
+    return error.details.message
+  }
+  return t('auth.loginFailed')
+}
+
+function isErrorRecord(value: unknown): value is { message?: unknown } {
+  return typeof value === 'object' && value !== null && !Array.isArray(value)
+}
+</script>
+
+<style scoped>
+.login-page {
+  min-height: 100vh;
+  display: grid;
+  place-items: center;
+  background:
+    linear-gradient(135deg, rgb(9 31 68 / 84%), rgb(6 19 44 / 92%)),
+    var(--th-color-navy-950);
+  padding: 24px;
+}
+
+.login-panel {
+  width: min(100%, 420px);
+  display: grid;
+  gap: 24px;
+  border: 1px solid rgb(255 255 255 / 16%);
+  border-radius: var(--th-radius-md);
+  background: rgb(255 255 255 / 96%);
+  box-shadow: var(--th-shadow-lg);
+  padding: 28px;
+}
+
+.login-brand {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  color: var(--th-color-slate-900);
+}
+
+.login-brand__mark {
+  width: 38px;
+  height: 38px;
+  border-radius: 10px;
+  background: linear-gradient(135deg, #0a7cff, #0057e5);
+}
+
+.login-brand strong,
+.login-brand small {
+  display: block;
+}
+
+.login-brand small {
+  margin-top: 2px;
+  color: var(--th-color-slate-500);
+  font-size: 11px;
+}
+
+.login-panel h1,
+.login-panel p {
+  margin: 0;
+}
+
+.login-panel h1 {
+  color: var(--th-color-slate-900);
+  font-size: 24px;
+}
+
+.login-panel header p {
+  margin-top: 8px;
+  color: var(--th-color-slate-500);
+  font-size: 13px;
+  line-height: 1.6;
+}
+
+.login-form {
+  display: grid;
+  gap: 16px;
+}
+
+.login-form label {
+  display: grid;
+  gap: 8px;
+  color: var(--th-color-slate-700);
+  font-size: 13px;
+  font-weight: 800;
+}
+
+.login-form input {
+  min-height: 42px;
+  border: 1px solid var(--th-color-slate-200);
+  border-radius: var(--th-radius-sm);
+  background: var(--th-color-white);
+  color: var(--th-color-slate-900);
+  font: inherit;
+  padding: 0 12px;
+}
+
+.login-form input:focus {
+  border-color: var(--th-color-blue-600);
+  box-shadow: 0 0 0 3px var(--th-color-blue-100);
+  outline: 0;
+}
+
+.login-error {
+  border-radius: var(--th-radius-sm);
+  background: var(--th-color-danger-bg);
+  color: var(--th-color-danger);
+  font-size: 13px;
+  padding: 10px 12px;
+}
+
+.login-submit {
+  display: inline-flex;
+  min-height: 42px;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  border: 1px solid var(--th-color-blue-600);
+  border-radius: var(--th-radius-sm);
+  background: var(--th-color-blue-600);
+  color: var(--th-color-white);
+  cursor: pointer;
+  font-weight: 800;
+}
+
+.login-submit:disabled {
+  cursor: not-allowed;
+  opacity: 0.55;
+}
+</style>
diff --git a/client/src/views/auth/UnauthorizedView.vue b/client/src/views/auth/UnauthorizedView.vue
new file mode 100644
index 0000000..bfb234c
--- /dev/null
+++ b/client/src/views/auth/UnauthorizedView.vue
@@ -0,0 +1,74 @@
+<template>
+  <section class="th-page unauthorized-view">
+    <div class="th-section unauthorized-card">
+      <i
+        class="pi pi-lock"
+        aria-hidden="true"
+      />
+      <h1>{{ t('auth.unauthorizedTitle') }}</h1>
+      <p>{{ t('auth.unauthorizedMessage') }}</p>
+      <RouterLink
+        class="primary-link"
+        :to="authStore.firstMenuPath ?? '/reservation/orders'"
+      >
+        {{ t('auth.backHome') }}
+      </RouterLink>
+    </div>
+  </section>
+</template>
+
+<script setup lang="ts">
+import { RouterLink } from 'vue-router'
+import { useI18n } from 'vue-i18n'
+
+import { useAuthStore } from '@/stores/authStore'
+
+const { t } = useI18n()
+const authStore = useAuthStore()
+</script>
+
+<style scoped>
+.unauthorized-view {
+  max-width: 760px;
+}
+
+.unauthorized-card {
+  min-height: 260px;
+  display: grid;
+  justify-items: start;
+  align-content: center;
+  gap: 12px;
+  padding: 28px;
+}
+
+.unauthorized-card i {
+  color: var(--th-color-blue-600);
+  font-size: 28px;
+}
+
+.unauthorized-card h1,
+.unauthorized-card p {
+  margin: 0;
+}
+
+.unauthorized-card h1 {
+  color: var(--th-color-slate-900);
+  font-size: 22px;
+}
+
+.unauthorized-card p {
+  color: var(--th-color-slate-500);
+  line-height: 1.6;
+}
+
+.primary-link {
+  display: inline-flex;
+  min-height: 36px;
+  align-items: center;
+  border-radius: var(--th-radius-sm);
+  background: var(--th-color-blue-600);
+  color: var(--th-color-white);
+  font-weight: 800;
+  padding: 0 14px;
+}
+</style>