From 70b5f34a748bdc86b508de292f9ee90c3ce2fe75 Mon Sep 17 00:00:00 2001
From: Chris <wtc.justin82@gmail.com>
Date: Mon, 30 Mar 2026 02:46:35 +0800
Subject: [PATCH] fix(frontend): harden auth routing and callback error
 handling

---
 frontend/src/App.vue                          |  7 +++++--
 frontend/src/pages/AuthCallbackPage.vue       | 12 ++++++++++-
 .../src/pages/admin/PermissionGroupsPage.vue  |  1 -
 frontend/src/router/index.js                  | 21 ++++++++++++-------
 4 files changed, 30 insertions(+), 11 deletions(-)

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 942d425..920d090 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="min-h-screen bg-gray-50">
-    <nav v-if="!isLoginPage" class="bg-white border-b border-gray-200 px-6 py-3 flex items-center justify-between shadow-sm">
+    <nav v-if="showNav" class="bg-white border-b border-gray-200 px-6 py-3 flex items-center justify-between shadow-sm">
       <div class="flex items-center gap-6">
         <span class="font-bold text-gray-800 text-base">member.ose.tw</span>
         <router-link
@@ -56,7 +56,10 @@ const route = useRoute()
 const router = useRouter()
 const authStore = useAuthStore()
 
-const isLoginPage = computed(() => route.name === 'login')
+const showNav = computed(() => {
+  const onAuthPage = route.name === 'login' || route.name === 'auth-callback'
+  return authStore.isLoggedIn && !onAuthPage
+})
 
 function handleAdminNav(command) {
   const routes = {
diff --git a/frontend/src/pages/AuthCallbackPage.vue b/frontend/src/pages/AuthCallbackPage.vue
index 4485362..84cc0ac 100644
--- a/frontend/src/pages/AuthCallbackPage.vue
+++ b/frontend/src/pages/AuthCallbackPage.vue
@@ -32,7 +32,17 @@ const error = ref('')
 onMounted(async () => {
   try {
     const code = route.query.code
-    const state = route.query.state
+    const oauthError = route.query.error
+    const oauthErrorDesc = route.query.error_description
+
+    if (oauthError) {
+      const reason = typeof oauthErrorDesc === 'string' && oauthErrorDesc
+        ? oauthErrorDesc
+        : String(oauthError)
+      error.value = `登入失敗：${reason}`
+      setTimeout(() => router.push('/login'), 3000)
+      return
+    }
 
     if (!code) {
       error.value = '缺少驗證代碼，登入失敗'
diff --git a/frontend/src/pages/admin/PermissionGroupsPage.vue b/frontend/src/pages/admin/PermissionGroupsPage.vue
index 19517f4..5d5b654 100644
--- a/frontend/src/pages/admin/PermissionGroupsPage.vue
+++ b/frontend/src/pages/admin/PermissionGroupsPage.vue
@@ -149,7 +149,6 @@ import {
   getPermissionGroups,
   createPermissionGroup,
   addMemberToGroup,
-  removeMemberFromGroup,
   groupGrant,
   groupRevoke
 } from '@/api/permission-groups'
diff --git a/frontend/src/router/index.js b/frontend/src/router/index.js
index dbb70ee..e0bbed3 100644
--- a/frontend/src/router/index.js
+++ b/frontend/src/router/index.js
@@ -28,37 +28,44 @@ const routes = [
   {
     path: '/admin/permissions',
     name: 'admin-permissions',
-    component: () => import('@/pages/permissions/PermissionAdminPage.vue')
+    component: () => import('@/pages/permissions/PermissionAdminPage.vue'),
+    meta: { requiresAuth: true }
   },
   {
     path: '/admin/systems',
     name: 'admin-systems',
-    component: () => import('@/pages/admin/SystemsPage.vue')
+    component: () => import('@/pages/admin/SystemsPage.vue'),
+    meta: { requiresAuth: true }
   },
   {
     path: '/admin/modules',
     name: 'admin-modules',
-    component: () => import('@/pages/admin/ModulesPage.vue')
+    component: () => import('@/pages/admin/ModulesPage.vue'),
+    meta: { requiresAuth: true }
   },
   {
     path: '/admin/companies',
     name: 'admin-companies',
-    component: () => import('@/pages/admin/CompaniesPage.vue')
+    component: () => import('@/pages/admin/CompaniesPage.vue'),
+    meta: { requiresAuth: true }
   },
   {
     path: '/admin/sites',
     name: 'admin-sites',
-    component: () => import('@/pages/admin/SitesPage.vue')
+    component: () => import('@/pages/admin/SitesPage.vue'),
+    meta: { requiresAuth: true }
   },
   {
     path: '/admin/members',
     name: 'admin-members',
-    component: () => import('@/pages/admin/MembersPage.vue')
+    component: () => import('@/pages/admin/MembersPage.vue'),
+    meta: { requiresAuth: true }
   },
   {
     path: '/admin/permission-groups',
     name: 'admin-permission-groups',
-    component: () => import('@/pages/admin/PermissionGroupsPage.vue')
+    component: () => import('@/pages/admin/PermissionGroupsPage.vue'),
+    meta: { requiresAuth: true }
   }
 ]