74 lines
1.9 KiB
Markdown
74 lines
1.9 KiB
Markdown
# Gateway Frontend
|
||
|
||
一般使用者前台 + 簡易管理後台，對應本 repo 的 Gateway API。
|
||
|
||
## 技術
|
||
|
||
- Vite + React + TypeScript + React Router
|
||
- 無 UI 框架，表單與頁面導覽即可日常使用
|
||
|
||
## 啟動（推薦一鍵後端）
|
||
|
||
```bash
|
||
# 終端 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 查看
|
||
|
||
### 取得管理員權限
|
||
|
||
```bash
|
||
make k6-seed-admin
|
||
# 將輸出的 ADMIN_ACCESS_TOKEN 貼到瀏覽器 — 需自行在 localStorage 設 access_token
|
||
# 或：用 seed 產生的帳密在 /login 登入（若 ZITADEL password grant 可用）
|
||
```
|
||
|
||
較簡單做法：完成一般註冊登入後，在 Mongo 手動指派 `tenant_admin`，或跑 `k6-seed-admin` 用新帳號登入。
|
||
|
||
## 環境變數
|
||
|
||
| 變數 | 說明 |
|
||
|------|------|
|
||
| `VITE_API_BASE` | API 根網址；留空則走 Vite proxy `/api` → `:8888` |
|
||
|
||
## 建置
|
||
|
||
```bash
|
||
npm run build # → dist/
|
||
```
|