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

2026-04-03 00:46:46 +08:00
parent c9d05531f8
commit 967ee17434
5 changed files with 107 additions and 133 deletions
--- a/src/api/auth.js
+++ b/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
+  })
--- a/src/api/http.js
+++ b/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 => {
-    if (err.response?.status === 401) {
-      localStorage.removeItem('access_token')
-      router.push('/login')
+  async err => {
+    const original = err.config || {}
+    if (err.response?.status === 401 && !original._retriedByRefresh) {
+      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 => {
-    if (err.response?.status === 401) {
-      localStorage.removeItem('access_token')
-      router.push('/login')
+  async err => {
+    const original = err.config || {}
+    if (err.response?.status === 401 && !original._retriedByRefresh) {
+      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)
  }
--- a/src/pages/AuthCallbackPage.vue
+++ b/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
--- a/src/pages/admin/SystemsPage.vue
+++ b/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>
-      <el-button type="primary" @click="showCreateDialog = true" :icon="Plus">新增系統</el-button>
+      <h2 class="text-xl font-bold text-gray-800">系統管理（Keycloak 唯一來源）</h2>
+      <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 { Plus } from '@element-plus/icons-vue'
-import { getSystems, createSystem, updateSystem, deleteSystem, getSystemRoles } from '@/api/systems'
+import { ElMessage } from 'element-plus'
+import { adminHttp } from '@/api/http'
+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() {
-  createForm.value = { name: '', idp_client_id: '', status: 'active' }
-}
-
-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
+async function handleSync() {
+  syncing.value = true
  try {
-    await createSystem(createForm.value)
-    ElMessage.success('新增系統成功')
-    showCreateDialog.value = false
-    resetCreateForm()
+    const res = await adminHttp.post('/admin/sync/from-keycloak', null, { params: { force: true } })
+    const summary = [
+      `systems +${res.data?.systems_created ?? 0}`,
+      `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
-  }
-}
-
-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 || '刪除系統失敗')
+    syncing.value = false
  }
 }

--- a/src/stores/auth.js
+++ b/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) {
-    accessToken.value = token
-    localStorage.setItem('access_token', token)
+  function setTokens(token, nextRefreshToken = null) {
+    accessToken.value = token || null
+    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 }
 })