Init frontend: Vue 3 + Vite member.ose.tw
建立完整前端架構： - 配置 Vite + Vue 3 + Element Plus + Tailwind - 實作 API 模層（axios interceptor + Bearer/Key 認證） - 狀態管理：auth store（用戶登入狀態）、permission store（權限快照 & Admin 認證） - 路由守衛：/me* 需 Bearer token，/admin* 不強制 - 完成三個頁面：登入、我的資料、我的權限快照、權限 grant/revoke 管理 - 全面錯誤處理與 UI 提示（401/403/404/503 對應訊息） Checklist 完成度： ✓ A.初始化（http.js、auth/permission store、.env） ✓ B.API 對接（/me、/me/permissions/snapshot、grant、revoke） ✓ C.頁面三組件 ✓ D.行為驗證（Token 過期、自動刷新、錯誤提示） ✓ E.交付條件（獨立刷新、錯誤 UI、loading/success 狀態） Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
This commit is contained in:
Chris
315
src/pages/permissions/PermissionAdminPage.vue
Normal file
315
src/pages/permissions/PermissionAdminPage.vue
Normal file
@@ -0,0 +1,315 @@
|
||||
<template>
|
||||
<div>
|
||||
<h2 class="text-xl font-bold text-gray-800 mb-6">權限管理</h2>
|
||||
|
||||
<!-- 認證設定 -->
|
||||
<el-card class="mb-6 shadow-sm">
|
||||
<template #header>
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="font-medium text-gray-700">管理員認證</span>
|
||||
<el-tag v-if="credsSaved" type="success" size="small">已儲存（session）</el-tag>
|
||||
<el-tag v-else type="warning" size="small">未設定</el-tag>
|
||||
</div>
|
||||
</template>
|
||||
<el-form :model="credsForm" inline>
|
||||
<el-form-item label="X-Client-Key">
|
||||
<el-input
|
||||
v-model="credsForm.clientKey"
|
||||
placeholder="client key"
|
||||
style="width: 220px"
|
||||
show-password
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="X-API-Key">
|
||||
<el-input
|
||||
v-model="credsForm.apiKey"
|
||||
placeholder="api key"
|
||||
style="width: 220px"
|
||||
show-password
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="saveCreds">儲存認證</el-button>
|
||||
<el-button v-if="credsSaved" @click="clearCreds" class="ml-2">清除</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-card>
|
||||
|
||||
<!-- Grant / Revoke -->
|
||||
<el-tabs v-model="activeTab" type="border-card" class="shadow-sm">
|
||||
<!-- Grant Tab -->
|
||||
<el-tab-pane label="Grant 授權" name="grant">
|
||||
<el-form
|
||||
ref="grantFormRef"
|
||||
:model="grantForm"
|
||||
:rules="grantRules"
|
||||
label-width="130px"
|
||||
class="max-w-xl mt-4"
|
||||
@submit.prevent="handleGrant"
|
||||
>
|
||||
<el-form-item label="Authentik Sub" prop="authentik_sub">
|
||||
<el-input v-model="grantForm.authentik_sub" placeholder="authentik-sub-xxx" />
|
||||
</el-form-item>
|
||||
<el-form-item label="Email" prop="email">
|
||||
<el-input v-model="grantForm.email" placeholder="user@example.com" />
|
||||
</el-form-item>
|
||||
<el-form-item label="顯示名稱" prop="display_name">
|
||||
<el-input v-model="grantForm.display_name" placeholder="User Name" />
|
||||
</el-form-item>
|
||||
<el-form-item label="Scope 類型" prop="scope_type">
|
||||
<el-input v-model="grantForm.scope_type" placeholder="site" />
|
||||
</el-form-item>
|
||||
<el-form-item label="Scope ID" prop="scope_id">
|
||||
<el-input v-model="grantForm.scope_id" placeholder="tw-main" />
|
||||
</el-form-item>
|
||||
<el-form-item label="模組" prop="module">
|
||||
<el-input v-model="grantForm.module" placeholder="campaign" />
|
||||
</el-form-item>
|
||||
<el-form-item label="操作" prop="action">
|
||||
<el-input v-model="grantForm.action" placeholder="view" />
|
||||
</el-form-item>
|
||||
|
||||
<el-alert
|
||||
v-if="grantError"
|
||||
:title="grantError"
|
||||
type="error"
|
||||
show-icon
|
||||
:closable="false"
|
||||
class="mb-4"
|
||||
/>
|
||||
<el-alert
|
||||
v-if="grantSuccess"
|
||||
:title="grantSuccess"
|
||||
type="success"
|
||||
show-icon
|
||||
:closable="false"
|
||||
class="mb-4"
|
||||
/>
|
||||
|
||||
<el-form-item>
|
||||
<el-button
|
||||
type="primary"
|
||||
native-type="submit"
|
||||
:loading="grantLoading"
|
||||
:disabled="!credsSaved"
|
||||
>
|
||||
Grant 授權
|
||||
</el-button>
|
||||
<el-button @click="resetGrant">清除</el-button>
|
||||
</el-form-item>
|
||||
<p v-if="!credsSaved" class="text-xs text-yellow-600 ml-2">請先設定管理員認證</p>
|
||||
</el-form>
|
||||
</el-tab-pane>
|
||||
|
||||
<!-- Revoke Tab -->
|
||||
<el-tab-pane label="Revoke 撤銷" name="revoke">
|
||||
<el-form
|
||||
ref="revokeFormRef"
|
||||
:model="revokeForm"
|
||||
:rules="revokeRules"
|
||||
label-width="130px"
|
||||
class="max-w-xl mt-4"
|
||||
@submit.prevent="handleRevoke"
|
||||
>
|
||||
<el-form-item label="Authentik Sub" prop="authentik_sub">
|
||||
<el-input v-model="revokeForm.authentik_sub" placeholder="authentik-sub-xxx" />
|
||||
</el-form-item>
|
||||
<el-form-item label="Scope 類型" prop="scope_type">
|
||||
<el-input v-model="revokeForm.scope_type" placeholder="site" />
|
||||
</el-form-item>
|
||||
<el-form-item label="Scope ID" prop="scope_id">
|
||||
<el-input v-model="revokeForm.scope_id" placeholder="tw-main" />
|
||||
</el-form-item>
|
||||
<el-form-item label="模組" prop="module">
|
||||
<el-input v-model="revokeForm.module" placeholder="campaign" />
|
||||
</el-form-item>
|
||||
<el-form-item label="操作" prop="action">
|
||||
<el-input v-model="revokeForm.action" placeholder="view" />
|
||||
</el-form-item>
|
||||
|
||||
<el-alert
|
||||
v-if="revokeError"
|
||||
:title="revokeError"
|
||||
type="error"
|
||||
show-icon
|
||||
:closable="false"
|
||||
class="mb-4"
|
||||
/>
|
||||
<el-alert
|
||||
v-if="revokeSuccess"
|
||||
:title="revokeSuccess"
|
||||
type="success"
|
||||
show-icon
|
||||
:closable="false"
|
||||
class="mb-4"
|
||||
/>
|
||||
|
||||
<el-form-item>
|
||||
<el-button
|
||||
type="danger"
|
||||
native-type="submit"
|
||||
:loading="revokeLoading"
|
||||
:disabled="!credsSaved"
|
||||
>
|
||||
Revoke 撤銷
|
||||
</el-button>
|
||||
<el-button @click="resetRevoke">清除</el-button>
|
||||
</el-form-item>
|
||||
<p v-if="!credsSaved" class="text-xs text-yellow-600 ml-2">請先設定管理員認證</p>
|
||||
</el-form>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, computed } from 'vue'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { usePermissionStore } from '@/stores/permission'
|
||||
|
||||
const permissionStore = usePermissionStore()
|
||||
|
||||
const activeTab = ref('grant')
|
||||
|
||||
// 認證
|
||||
const credsForm = reactive({
|
||||
clientKey: permissionStore.adminClientKey,
|
||||
apiKey: permissionStore.adminApiKey
|
||||
})
|
||||
|
||||
const credsSaved = computed(() => permissionStore.hasAdminCreds())
|
||||
|
||||
function saveCreds() {
|
||||
if (!credsForm.clientKey || !credsForm.apiKey) {
|
||||
ElMessage.warning('請填寫完整認證')
|
||||
return
|
||||
}
|
||||
permissionStore.setAdminCreds(credsForm.clientKey, credsForm.apiKey)
|
||||
ElMessage.success('認證已儲存（session）')
|
||||
}
|
||||
|
||||
function clearCreds() {
|
||||
permissionStore.clearAdminCreds()
|
||||
credsForm.clientKey = ''
|
||||
credsForm.apiKey = ''
|
||||
ElMessage.info('認證已清除')
|
||||
}
|
||||
|
||||
// Grant
|
||||
const grantFormRef = ref()
|
||||
const grantLoading = ref(false)
|
||||
const grantError = ref('')
|
||||
const grantSuccess = ref('')
|
||||
|
||||
const grantForm = reactive({
|
||||
authentik_sub: '',
|
||||
email: '',
|
||||
display_name: '',
|
||||
scope_type: '',
|
||||
scope_id: '',
|
||||
module: '',
|
||||
action: ''
|
||||
})
|
||||
|
||||
const required = { required: true, message: '必填', trigger: 'blur' }
|
||||
const grantRules = {
|
||||
authentik_sub: [required],
|
||||
email: [required],
|
||||
display_name: [required],
|
||||
scope_type: [required],
|
||||
scope_id: [required],
|
||||
module: [required],
|
||||
action: [required]
|
||||
}
|
||||
|
||||
async function handleGrant() {
|
||||
const valid = await grantFormRef.value.validate().catch(() => false)
|
||||
if (!valid) return
|
||||
grantLoading.value = true
|
||||
grantError.value = ''
|
||||
grantSuccess.value = ''
|
||||
try {
|
||||
const result = await permissionStore.grant({ ...grantForm })
|
||||
grantSuccess.value = `授權成功（ID: ${result.permission_id}）`
|
||||
ElMessage.success('Grant 成功')
|
||||
} catch (err) {
|
||||
grantError.value = formatAdminError(err)
|
||||
} finally {
|
||||
grantLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function resetGrant() {
|
||||
grantFormRef.value?.resetFields()
|
||||
grantError.value = ''
|
||||
grantSuccess.value = ''
|
||||
}
|
||||
|
||||
// Revoke
|
||||
const revokeFormRef = ref()
|
||||
const revokeLoading = ref(false)
|
||||
const revokeError = ref('')
|
||||
const revokeSuccess = ref('')
|
||||
|
||||
const revokeForm = reactive({
|
||||
authentik_sub: '',
|
||||
scope_type: '',
|
||||
scope_id: '',
|
||||
module: '',
|
||||
action: ''
|
||||
})
|
||||
|
||||
const revokeRules = {
|
||||
authentik_sub: [required],
|
||||
scope_type: [required],
|
||||
scope_id: [required],
|
||||
module: [required],
|
||||
action: [required]
|
||||
}
|
||||
|
||||
async function handleRevoke() {
|
||||
const valid = await revokeFormRef.value.validate().catch(() => false)
|
||||
if (!valid) return
|
||||
revokeLoading.value = true
|
||||
revokeError.value = ''
|
||||
revokeSuccess.value = ''
|
||||
try {
|
||||
const result = await permissionStore.revoke({ ...revokeForm })
|
||||
revokeSuccess.value = `撤銷成功（共刪除 ${result.deleted} 筆）`
|
||||
ElMessage.success('Revoke 成功')
|
||||
} catch (err) {
|
||||
revokeError.value = formatAdminError(err)
|
||||
} finally {
|
||||
revokeLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function resetRevoke() {
|
||||
revokeFormRef.value?.resetFields()
|
||||
revokeError.value = ''
|
||||
revokeSuccess.value = ''
|
||||
}
|
||||
|
||||
function formatAdminError(err) {
|
||||
const status = err.response?.status
|
||||
const detail = err.response?.data?.detail
|
||||
const map = {
|
||||
invalid_client: '無效的 Client Key',
|
||||
invalid_api_key: '無效的 API Key',
|
||||
client_expired: 'Client 已過期',
|
||||
origin_not_allowed: '來源 Origin 不允許',
|
||||
ip_not_allowed: 'IP 不在白名單',
|
||||
path_not_allowed: '路徑不允許',
|
||||
internal_secret_not_configured: '後端設定缺失（internal secret）',
|
||||
authentik_admin_not_configured: '後端設定缺失（authentik admin）',
|
||||
user_not_found: '找不到該使用者'
|
||||
}
|
||||
if (detail && map[detail]) return map[detail]
|
||||
if (detail) return `錯誤：${detail}`
|
||||
if (status === 401) return '認證失敗，請檢查 Client Key / API Key'
|
||||
if (status === 403) return '存取被拒（IP 或 Origin 限制）'
|
||||
if (status === 404) return '找不到該使用者'
|
||||
if (status === 503) return '後端設定不完整，請聯絡管理員'
|
||||
return '操作失敗，請稍後再試'
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user