ZITADEL v2 不支援 password grant,改優先走 Sessions API 以恢復 Email 登入; dev-up 自動 seed 權限與 admin@k6.local,並改善使用者角色頁在無角色時仍可指派。 Co-authored-by: Cursor <cursoragent@cursor.com> |
||
|---|---|---|
| .. | ||
| .vite/deps | ||
| public | ||
| src | ||
| .gitignore | ||
| README.md | ||
| eslint.config.js | ||
| index.html | ||
| package-lock.json | ||
| package.json | ||
| tsconfig.app.json | ||
| tsconfig.json | ||
| tsconfig.node.json | ||
| vite.config.ts | ||
README.md
Gateway Frontend
一般使用者前台 + 簡易管理後台,對應本 repo 的 Gateway API。
技術
- Vite + React + TypeScript + React Router
- 無 UI 框架,表單與頁面導覽即可日常使用
啟動(推薦一鍵後端)
# 終端 1:後端全套(首次約 1–2 分鐘,等 ZITADEL 起來)
make dev-up
# 終端 2:前端
make frontend-dev
開啟 http://localhost:5173 · 註冊 OTP 到 http://localhost:8025(MailHog)
關閉:make dev-down
頁面結構
使用者前台
| 路徑 | 功能 |
|---|---|
/login |
登入 |
/register |
註冊(寄 Email OTP) |
/register/confirm |
輸入 6 碼完成註冊 |
/app |
首頁(個人摘要、驗證狀態、角色) |
/app/profile |
編輯顯示名稱、語系、幣別、電話 |
/app/security |
商業 Email/手機驗證、TOTP 綁定 |
管理後台(需 tenant_admin 或 tenant_owner)
| 路徑 | 功能 |
|---|---|
/admin |
總覽、Policy 重載 |
/admin/roles |
角色列表、新增、改名、刪除 |
/admin/users |
依 UID 查詢 / 指派 / 撤銷角色 |
有管理權限時,使用者前台頂部會出現「管理後台」連結。
本機預設
- 租戶:
k6-tenant - 邀請碼:
K6INVITE(需先make k6-seed-fixtures或對應 Mongo 資料) - OTP:開發環境到 MailHog http://localhost:8025 查看
取得管理員權限
make dev-up 會自動建立原始管理員並寫入 Mongo:
| 欄位 | 值 |
|---|---|
admin@k6.local |
|
| 密碼 | Admin-Pass-1! |
| 租戶 | k6-tenant |
| 角色 | tenant_admin |
登入後頂部會出現「管理後台」,或在首頁 /app 的「權限管理」卡片進入。
手動重跑 seed(冪等):
make dev-seed-admin
環境變數
| 變數 | 說明 |
|---|---|
VITE_API_BASE |
API 根網址;留空則走 Vite proxy /api → :8888 |
建置
npm run build # → dist/