feat(sync): keycloak as source-of-truth with auto catalog sync and token refresh

src/api/auth.js

@@ -18,3 +18,8 @@ export const exchangeOidcCode = (code, redirectUri, codeVerifier) =>
     redirect_uri: redirectUri,
     code_verifier: codeVerifier || undefined
   })
+
+export const refreshOidcToken = (refreshToken) =>
+  userHttp.post('/auth/refresh', {
+    refresh_token: refreshToken
+  })

src/api/http.js

@@ -2,6 +2,37 @@ import axios from 'axios'
 import router from '@/router'
 
 const BASE_URL = import.meta.env.VITE_API_BASE_URL
+let refreshPromise = null
+
+async function refreshAccessToken() {
+  if (refreshPromise) return refreshPromise
+  const refreshToken = localStorage.getItem('refresh_token')
+  if (!refreshToken) throw new Error('missing_refresh_token')
+
+  refreshPromise = axios
+    .post(`${BASE_URL}/auth/refresh`, { refresh_token: refreshToken })
+    .then((res) => {
+      const nextAccessToken = res.data?.access_token
+      const nextRefreshToken = res.data?.refresh_token || refreshToken
+      if (!nextAccessToken) {
+        throw new Error('missing_access_token')
+      }
+      localStorage.setItem('access_token', nextAccessToken)
+      localStorage.setItem('refresh_token', nextRefreshToken)
+      return nextAccessToken
+    })
+    .finally(() => {
+      refreshPromise = null
+    })
+
+  return refreshPromise
+}
+
+function hardLogoutToLogin() {
+  localStorage.removeItem('access_token')
+  localStorage.removeItem('refresh_token')
+  router.push('/login')
+}
 
 // 使用者 API：帶 Bearer token
 export const userHttp = axios.create({ baseURL: BASE_URL })
@@ -16,10 +47,18 @@ userHttp.interceptors.request.use(config => {
 
 userHttp.interceptors.response.use(
   res => res,
-  err => {
+  async err => {
-    if (err.response?.status === 401) {
+    const original = err.config || {}
-      localStorage.removeItem('access_token')
+    if (err.response?.status === 401 && !original._retriedByRefresh) {
-      router.push('/login')
+      original._retriedByRefresh = true
+      try {
+        const nextToken = await refreshAccessToken()
+        original.headers = original.headers || {}
+        original.headers['Authorization'] = `Bearer ${nextToken}`
+        return userHttp.request(original)
+      } catch (_refreshErr) {
+        hardLogoutToLogin()
+      }
     }
     return Promise.reject(err)
   }
@@ -38,10 +77,18 @@ adminHttp.interceptors.request.use(config => {
 
 adminHttp.interceptors.response.use(
   res => res,
-  err => {
+  async err => {
-    if (err.response?.status === 401) {
+    const original = err.config || {}
-      localStorage.removeItem('access_token')
+    if (err.response?.status === 401 && !original._retriedByRefresh) {
-      router.push('/login')
+      original._retriedByRefresh = true
+      try {
+        const nextToken = await refreshAccessToken()
+        original.headers = original.headers || {}
+        original.headers['Authorization'] = `Bearer ${nextToken}`
+        return adminHttp.request(original)
+      } catch (_refreshErr) {
+        hardLogoutToLogin()
+      }
     }
     return Promise.reject(err)
   }

src/pages/AuthCallbackPage.vue

@@ -63,7 +63,7 @@ onMounted(async () => {
 
     const redirectUri = `${window.location.origin}/auth/callback`
     const res = await exchangeOidcCode(code, redirectUri, codeVerifier)
-    const { access_token } = res.data
+    const { access_token, refresh_token } = res.data
 
     if (!access_token) {
       error.value = '無法取得 access token'
@@ -72,7 +72,7 @@ onMounted(async () => {
     }
 
     // 存 token 並取得使用者資料
-    authStore.setToken(access_token)
+    authStore.setTokens(access_token, refresh_token || null)
     await authStore.fetchMe()
 
     // 導向原頁面或預設的 /me

src/pages/admin/SystemsPage.vue

@@ -1,10 +1,19 @@
 <template>
   <div>
     <div class="flex items-center justify-between mb-6">
-      <h2 class="text-xl font-bold text-gray-800">系統管理</h2>
+      <h2 class="text-xl font-bold text-gray-800">系統管理（Keycloak 唯一來源）</h2>
-      <el-button type="primary" @click="showCreateDialog = true" :icon="Plus">新增系統</el-button>
+      <div class="flex gap-2">
+        <el-button :loading="syncing" @click="handleSync">同步 Keycloak</el-button>
+        <el-button :loading="loading" @click="load">重新整理</el-button>
+      </div>
     </div>
 
+    <el-alert type="info" :closable="false" show-icon class="mb-4">
+      <template #title>
+        系統與角色請在 Keycloak 建立與調整，member 後台只做顯示與關聯。
+      </template>
+    </el-alert>
+
     <el-alert v-if="error" :title="errorMsg" type="error" show-icon :closable="false" class="mb-4" />
     <el-skeleton v-if="loading" :rows="4" animated />
 
@@ -12,52 +21,15 @@
       <template #empty><el-empty description="目前無系統" /></template>
       <el-table-column prop="system_key" label="System Key" width="200" />
       <el-table-column prop="name" label="系統名稱" min-width="180" />
-      <el-table-column prop="idp_client_id" label="Keycloak Client ID" min-width="200" />
+      <el-table-column prop="idp_client_id" label="Keycloak Client ID" min-width="220" />
       <el-table-column prop="status" label="狀態" width="110" />
-      <el-table-column label="操作" width="280">
+      <el-table-column label="操作" width="120">
         <template #default="{ row }">
-          <el-button size="small" @click="openEdit(row)">編輯</el-button>
           <el-button size="small" @click="openRoles(row)">角色</el-button>
-          <el-button size="small" type="danger" @click="handleDelete(row)">刪除</el-button>
         </template>
       </el-table-column>
     </el-table>
 
-    <el-dialog v-model="showCreateDialog" title="新增系統" width="620px" @close="resetCreateForm">
-      <el-form ref="createFormRef" :model="createForm" :rules="rules" label-width="160px">
-        <el-form-item label="系統名稱" prop="name"><el-input v-model="createForm.name" /></el-form-item>
-        <el-form-item label="Keycloak Client ID" prop="idp_client_id"><el-input v-model="createForm.idp_client_id" /></el-form-item>
-        <el-form-item label="狀態">
-          <el-select v-model="createForm.status" style="width: 100%">
-            <el-option label="active" value="active" />
-            <el-option label="inactive" value="inactive" />
-          </el-select>
-        </el-form-item>
-      </el-form>
-      <template #footer>
-        <el-button @click="showCreateDialog = false">取消</el-button>
-        <el-button type="primary" :loading="creating" @click="handleCreate">建立</el-button>
-      </template>
-    </el-dialog>
-
-    <el-dialog v-model="showEditDialog" title="編輯系統" width="620px" @close="resetEditForm">
-      <el-form :model="editForm" label-width="160px">
-        <el-form-item label="System Key"><el-input :model-value="editForm.system_key" disabled /></el-form-item>
-        <el-form-item label="系統名稱"><el-input v-model="editForm.name" /></el-form-item>
-        <el-form-item label="Keycloak Client ID"><el-input v-model="editForm.idp_client_id" /></el-form-item>
-        <el-form-item label="狀態">
-          <el-select v-model="editForm.status" style="width: 100%">
-            <el-option label="active" value="active" />
-            <el-option label="inactive" value="inactive" />
-          </el-select>
-        </el-form-item>
-      </el-form>
-      <template #footer>
-        <el-button @click="showEditDialog = false">取消</el-button>
-        <el-button type="primary" :loading="saving" @click="handleEdit">儲存</el-button>
-      </template>
-    </el-dialog>
-
     <el-dialog v-model="showRolesDialog" :title="`系統角色：${selectedSystemLabel}`" width="980px">
       <el-table :data="systemRoles" border stripe v-loading="rolesLoading">
         <template #empty><el-empty description="此系統目前沒有角色" /></template>
@@ -75,28 +47,16 @@
 
 <script setup>
 import { ref, onMounted } from 'vue'
-import { ElMessage, ElMessageBox } from 'element-plus'
+import { ElMessage } from 'element-plus'
-import { Plus } from '@element-plus/icons-vue'
+import { adminHttp } from '@/api/http'
-import { getSystems, createSystem, updateSystem, deleteSystem, getSystemRoles } from '@/api/systems'
+import { getSystems, getSystemRoles } from '@/api/systems'
 
 const systems = ref([])
 const loading = ref(false)
+const syncing = ref(false)
 const error = ref(false)
 const errorMsg = ref('')
 
-const showCreateDialog = ref(false)
-const showEditDialog = ref(false)
-const creating = ref(false)
-const saving = ref(false)
-const createFormRef = ref()
-
-const createForm = ref({ name: '', idp_client_id: '', status: 'active' })
-const editForm = ref({ system_key: '', name: '', idp_client_id: '', status: 'active' })
-const rules = {
-  name: [{ required: true, message: '請輸入系統名稱', trigger: 'blur' }],
-  idp_client_id: [{ required: true, message: '請輸入 Keycloak Client ID', trigger: 'blur' }]
-}
-
 const showRolesDialog = ref(false)
 const selectedSystemLabel = ref('')
 const systemRoles = ref([])
@@ -116,72 +76,21 @@ async function load() {
   }
 }
 
-function resetCreateForm() {
+async function handleSync() {
-  createForm.value = { name: '', idp_client_id: '', status: 'active' }
+  syncing.value = true
-}
-
-function openEdit(row) {
-  editForm.value = {
-    system_key: row.system_key,
-    name: row.name,
-    idp_client_id: row.idp_client_id,
-    status: row.status || 'active'
-  }
-  showEditDialog.value = true
-}
-
-function resetEditForm() {
-  editForm.value = { system_key: '', name: '', idp_client_id: '', status: 'active' }
-}
-
-async function handleCreate() {
-  const valid = await createFormRef.value.validate().catch(() => false)
-  if (!valid) return
-  creating.value = true
   try {
-    await createSystem(createForm.value)
+    const res = await adminHttp.post('/admin/sync/from-keycloak', null, { params: { force: true } })
-    ElMessage.success('新增系統成功')
+    const summary = [
-    showCreateDialog.value = false
+      `systems +${res.data?.systems_created ?? 0}`,
-    resetCreateForm()
+      `roles +${res.data?.roles_created ?? 0}`,
+      `users upsert ${res.data?.users_upserted ?? 0}`
+    ].join(' / ')
+    ElMessage.success(`同步完成：${summary}`)
     await load()
   } catch (err) {
-    ElMessage.error(err.response?.data?.detail || '新增系統失敗')
+    ElMessage.error(err.response?.data?.detail || '同步失敗')
   } finally {
-    creating.value = false
+    syncing.value = false
-  }
-}
-
-async function handleEdit() {
-  saving.value = true
-  try {
-    await updateSystem(editForm.value.system_key, {
-      name: editForm.value.name,
-      idp_client_id: editForm.value.idp_client_id,
-      status: editForm.value.status
-    })
-    ElMessage.success('更新成功')
-    showEditDialog.value = false
-    await load()
-  } catch (err) {
-    ElMessage.error(err.response?.data?.detail || '更新系統失敗')
-  } finally {
-    saving.value = false
-  }
-}
-
-async function handleDelete(row) {
-  try {
-    await ElMessageBox.confirm(
-      `確認刪除系統 ${row.name}（${row.system_key}）？`,
-      '刪除確認',
-      { type: 'warning' }
-    )
-    await deleteSystem(row.system_key)
-    ElMessage.success('刪除成功')
-    await load()
-  } catch (err) {
-    if (err === 'cancel') return
-    ElMessage.error(err.response?.data?.detail || '刪除系統失敗')
   }
 }
 

src/stores/auth.js

@@ -4,13 +4,24 @@ import { getMe } from '@/api/me'
 
 export const useAuthStore = defineStore('auth', () => {
   const accessToken = ref(localStorage.getItem('access_token') || null)
+  const refreshToken = ref(localStorage.getItem('refresh_token') || null)
   const me = ref(null)
 
   const isLoggedIn = computed(() => !!accessToken.value)
 
-  function setToken(token) {
+  function setTokens(token, nextRefreshToken = null) {
-    accessToken.value = token
+    accessToken.value = token || null
-    localStorage.setItem('access_token', token)
+    refreshToken.value = nextRefreshToken || null
+    if (token) {
+      localStorage.setItem('access_token', token)
+    } else {
+      localStorage.removeItem('access_token')
+    }
+    if (nextRefreshToken) {
+      localStorage.setItem('refresh_token', nextRefreshToken)
+    } else {
+      localStorage.removeItem('refresh_token')
+    }
   }
 
   async function fetchMe() {
@@ -21,9 +32,11 @@ export const useAuthStore = defineStore('auth', () => {
 
   function logout() {
     accessToken.value = null
+    refreshToken.value = null
     me.value = null
     localStorage.removeItem('access_token')
+    localStorage.removeItem('refresh_token')
   }
 
-  return { accessToken, me, isLoggedIn, setToken, fetchMe, logout }
+  return { accessToken, refreshToken, me, isLoggedIn, setTokens, fetchMe, logout }
 })