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:
86
frontend/src/pages/LoginPage.vue
Normal file
86
frontend/src/pages/LoginPage.vue
Normal file
@@ -0,0 +1,86 @@
|
||||
<template>
|
||||
<div class="flex items-center justify-center min-h-[70vh]">
|
||||
<el-card class="w-full max-w-md shadow-md">
|
||||
<template #header>
|
||||
<div class="text-center">
|
||||
<h1 class="text-xl font-bold text-gray-800">member.ose.tw</h1>
|
||||
<p class="text-sm text-gray-500 mt-1">請輸入 Authentik Access Token 登入</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<el-form @submit.prevent="handleLogin">
|
||||
<el-form-item>
|
||||
<el-input
|
||||
v-model="token"
|
||||
type="textarea"
|
||||
:rows="4"
|
||||
placeholder="貼上 Bearer Token..."
|
||||
resize="none"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-alert
|
||||
v-if="error"
|
||||
:title="error"
|
||||
type="error"
|
||||
show-icon
|
||||
:closable="false"
|
||||
class="mb-4"
|
||||
/>
|
||||
|
||||
<el-form-item>
|
||||
<el-button
|
||||
type="primary"
|
||||
native-type="submit"
|
||||
class="w-full"
|
||||
:loading="loading"
|
||||
:disabled="!token.trim()"
|
||||
>
|
||||
登入
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<p class="text-xs text-gray-400 text-center mt-2">
|
||||
Token 從 Authentik 取得,存於本機 localStorage
|
||||
</p>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { useRouter, useRoute } from 'vue-router'
|
||||
import { useAuthStore } from '@/stores/auth'
|
||||
|
||||
const router = useRouter()
|
||||
const route = useRoute()
|
||||
const authStore = useAuthStore()
|
||||
|
||||
const token = ref('')
|
||||
const loading = ref(false)
|
||||
const error = ref('')
|
||||
|
||||
async function handleLogin() {
|
||||
if (!token.value.trim()) return
|
||||
loading.value = true
|
||||
error.value = ''
|
||||
try {
|
||||
authStore.setToken(token.value.trim())
|
||||
await authStore.fetchMe()
|
||||
const redirect = route.query.redirect || '/me'
|
||||
router.push(redirect)
|
||||
} catch (err) {
|
||||
authStore.logout()
|
||||
const detail = err.response?.data?.detail
|
||||
if (detail === 'missing_bearer_token' || detail === 'invalid_bearer_token') {
|
||||
error.value = 'Token 無效或已過期,請重新取得'
|
||||
} else {
|
||||
error.value = '登入失敗,請稍後再試'
|
||||
}
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user