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
2026-03-29 23:26:58 +08:00
parent d1a5ad2819
commit d26762be5d
22 changed files with 3795 additions and 0 deletions

37
frontend/src/api/http.js Normal file
View File

@@ -0,0 +1,37 @@
import axios from 'axios'
import router from '@/router'
const BASE_URL = import.meta.env.VITE_API_BASE_URL
// 使用者 API帶 Bearer token
export const userHttp = axios.create({ baseURL: BASE_URL })
userHttp.interceptors.request.use(config => {
const token = localStorage.getItem('access_token')
if (token) {
config.headers['Authorization'] = `Bearer ${token}`
}
return config
})
userHttp.interceptors.response.use(
res => res,
err => {
if (err.response?.status === 401) {
localStorage.removeItem('access_token')
router.push('/login')
}
return Promise.reject(err)
}
)
// 管理員 API帶 X-Client-Key / X-API-Key
export const adminHttp = axios.create({ baseURL: BASE_URL })
adminHttp.interceptors.request.use(config => {
const clientKey = sessionStorage.getItem('admin_client_key')
const apiKey = sessionStorage.getItem('admin_api_key')
if (clientKey) config.headers['X-Client-Key'] = clientKey
if (apiKey) config.headers['X-API-Key'] = apiKey
return config
})

4
frontend/src/api/me.js Normal file
View File

@@ -0,0 +1,4 @@
import { userHttp } from './http'
export const getMe = () => userHttp.get('/me')
export const getMyPermissionSnapshot = () => userHttp.get('/me/permissions/snapshot')

View File

@@ -0,0 +1,4 @@
import { adminHttp } from './http'
export const grantPermission = (data) => adminHttp.post('/admin/permissions/grant', data)
export const revokePermission = (data) => adminHttp.post('/admin/permissions/revoke', data)