lisone/ds2api
1
0
Fork 0
mirror of https://github.com/CJackHwang/ds2api.git synced 2026-05-14 13:15:07 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: Implement user authentication for the admin web UI, including login, session management, and securing API calls.

Browse Source
This commit is contained in:
CJACK
2026-02-01 03:40:25 +08:00
parent 23bd4970d9
commit 4193336dd8
9 changed files with 437 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
webui/src/components/AccountManager.jsx
View File

@@ -1,6 +1,6 @@
import { useState, useEffect } from 'react'
export default function AccountManager({ config, onRefresh, onMessage }) {
export default function AccountManager({ config, onRefresh, onMessage, authFetch }) {
const [showAddKey, setShowAddKey] = useState(false)
const [showAddAccount, setShowAddAccount] = useState(false)
const [newKey, setNewKey] = useState('')
@@ -13,10 +13,13 @@ export default function AccountManager({ config, onRefresh, onMessage }) {
const [batchProgress, setBatchProgress] = useState({ current: 0, total: 0, results: [] })
const [queueStatus, setQueueStatus] = useState(null)
// 使用 authFetch 或回退到普通 fetch
const apiFetch = authFetch || fetch
// 获取队列状态
const fetchQueueStatus = async () => {
try {
const res = await fetch('/admin/queue/status')
const res = await apiFetch('/admin/queue/status')
if (res.ok) {
const data = await res.json()
setQueueStatus(data)
@@ -36,7 +39,7 @@ export default function AccountManager({ config, onRefresh, onMessage }) {
if (!newKey.trim()) return
setLoading(true)
try {
const res = await fetch('/admin/keys', {
const res = await apiFetch('/admin/keys', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ key: newKey.trim() }),
@@ -60,7 +63,7 @@ export default function AccountManager({ config, onRefresh, onMessage }) {
const deleteKey = async (key) => {
if (!confirm('确定删除此 API Key？')) return
try {
const res = await fetch(`/admin/keys/${encodeURIComponent(key)}`, { method: 'DELETE' })
const res = await apiFetch(`/admin/keys/${encodeURIComponent(key)}`, { method: 'DELETE' })
if (res.ok) {
onMessage('success', '删除成功')
onRefresh()
@@ -79,7 +82,7 @@ export default function AccountManager({ config, onRefresh, onMessage }) {
}
setLoading(true)
try {
const res = await fetch('/admin/accounts', {
const res = await apiFetch('/admin/accounts', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(newAccount),
@@ -103,7 +106,7 @@ export default function AccountManager({ config, onRefresh, onMessage }) {
const deleteAccount = async (id) => {
if (!confirm('确定删除此账号？')) return
try {
const res = await fetch(`/admin/accounts/${encodeURIComponent(id)}`, { method: 'DELETE' })
const res = await apiFetch(`/admin/accounts/${encodeURIComponent(id)}`, { method: 'DELETE' })
if (res.ok) {
onMessage('success', '删除成功')
onRefresh()
@@ -119,7 +122,7 @@ export default function AccountManager({ config, onRefresh, onMessage }) {
const validateAccount = async (identifier) => {
setValidating(prev => ({ ...prev, [identifier]: true }))
try {
const res = await fetch('/admin/accounts/validate', {
const res = await apiFetch('/admin/accounts/validate', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ identifier }),
@@ -155,7 +158,7 @@ export default function AccountManager({ config, onRefresh, onMessage }) {
const id = acc.email || acc.mobile
try {
const res = await fetch('/admin/accounts/validate', {
const res = await apiFetch('/admin/accounts/validate', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ identifier: id }),
@@ -179,7 +182,7 @@ export default function AccountManager({ config, onRefresh, onMessage }) {
const testAccount = async (identifier) => {
setTesting(prev => ({ ...prev, [identifier]: true }))
try {
const res = await fetch('/admin/accounts/test', {
const res = await apiFetch('/admin/accounts/test', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ identifier }),
@@ -215,7 +218,7 @@ export default function AccountManager({ config, onRefresh, onMessage }) {
const id = acc.email || acc.mobile
try {
const res = await fetch('/admin/accounts/test', {
const res = await apiFetch('/admin/accounts/test', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ identifier: id }),

9
webui/src/components/ApiTester.jsx
View File

@@ -7,7 +7,7 @@ const MODELS = [
{ id: 'deepseek-reasoner-search', name: 'deepseek-reasoner-search' },
]
export default function ApiTester({ config, onMessage }) {
export default function ApiTester({ config, onMessage, authFetch }) {
const [model, setModel] = useState('deepseek-chat')
const [message, setMessage] = useState('你好，请用一句话介绍你自己。')
const [apiKey, setApiKey] = useState('')
@@ -15,6 +15,9 @@ export default function ApiTester({ config, onMessage }) {
const [response, setResponse] = useState(null)
const [loading, setLoading] = useState(false)
// 使用 authFetch 或回退到普通 fetch（admin API 用 authFetch，OpenAI 兼容 API 用普通 fetch）
const apiFetch = authFetch || fetch
// 获取账号列表
const accounts = config.accounts || []
@@ -22,7 +25,7 @@ export default function ApiTester({ config, onMessage }) {
setLoading(true)
setResponse(null)
try {
const res = await fetch('/admin/test', {
const res = await apiFetch('/admin/test', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
@@ -96,7 +99,7 @@ export default function ApiTester({ config, onMessage }) {
// 如果选择了指定账号，使用账号测试接口
if (selectedAccount) {
try {
const res = await fetch('/admin/accounts/test', {
const res = await apiFetch('/admin/accounts/test', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({

11
webui/src/components/BatchImport.jsx
View File

@@ -51,11 +51,14 @@ const TEMPLATES = {
}
}
export default function BatchImport({ onRefresh, onMessage }) {
export default function BatchImport({ onRefresh, onMessage, authFetch }) {
const [jsonInput, setJsonInput] = useState('')
const [loading, setLoading] = useState(false)
const [result, setResult] = useState(null)
// 使用 authFetch 或回退到普通 fetch
const apiFetch = authFetch || fetch
const handleImport = async () => {
if (!jsonInput.trim()) {
onMessage('error', '请输入 JSON 配置')
@@ -73,7 +76,7 @@ export default function BatchImport({ onRefresh, onMessage }) {
setLoading(true)
setResult(null)
try {
const res = await fetch('/admin/import', {
const res = await apiFetch('/admin/import', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(config),
@@ -103,7 +106,7 @@ export default function BatchImport({ onRefresh, onMessage }) {
const handleExport = async () => {
try {
const res = await fetch('/admin/export')
const res = await apiFetch('/admin/export')
if (res.ok) {
const data = await res.json()
setJsonInput(JSON.stringify(JSON.parse(data.json), null, 2))
@@ -116,7 +119,7 @@ export default function BatchImport({ onRefresh, onMessage }) {
const copyBase64 = async () => {
try {
const res = await fetch('/admin/export')
const res = await apiFetch('/admin/export')
if (res.ok) {
const data = await res.json()
await navigator.clipboard.writeText(data.base64)

90
webui/src/components/Login.jsx Normal file
View File

@@ -0,0 +1,90 @@
import { useState } from 'react'
export default function Login({ onLogin, onMessage }) {
const [adminKey, setAdminKey] = useState('')
const [loading, setLoading] = useState(false)
const [remember, setRemember] = useState(true)
const handleLogin = async (e) => {
e.preventDefault()
setLoading(true)
try {
const res = await fetch('/admin/login', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ admin_key: adminKey }),
})
const data = await res.json()
if (res.ok && data.success) {
// 存储 token
const storage = remember ? localStorage : sessionStorage
storage.setItem('ds2api_token', data.token)
storage.setItem('ds2api_token_expires', Date.now() + data.expires_in * 1000)
onLogin(data.token)
if (data.message) {
onMessage('warning', data.message)
}
} else {
onMessage('error', data.detail || '登录失败')
}
} catch (e) {
onMessage('error', '网络错误: ' + e.message)
} finally {
setLoading(false)
}
}
return (
<div className="login-container">
<div className="login-card">
<div className="login-header">
<h1>🔐 DS2API Admin</h1>
<p>请输入管理密钥登录</p>
</div>
<form onSubmit={handleLogin}>
<div className="form-group">
<label className="form-label">管理密钥</label>
<input
type="password"
className="form-input"
placeholder="输入 DS2API_ADMIN_KEY..."
value={adminKey}
onChange={e => setAdminKey(e.target.value)}
autoFocus
/>
</div>
<div className="form-group" style={{ flexDirection: 'row', alignItems: 'center', gap: '0.5rem' }}>
<input
type="checkbox"
id="remember"
checked={remember}
onChange={e => setRemember(e.target.checked)}
/>
<label htmlFor="remember" style={{ cursor: 'pointer' }}>
记住登录状态
</label>
</div>
<button
type="submit"
className="btn btn-primary"
disabled={loading}
style={{ width: '100%', justifyContent: 'center' }}
>
{loading ? <span className="loading"></span> : '🚀 登录'}
</button>
</form>
<div className="login-footer">
<p>Session 有效期 24 小时</p>
</div>
</div>
</div>
)
}

9
webui/src/components/VercelSync.jsx
View File

@@ -1,6 +1,6 @@
import { useState, useEffect } from 'react'
export default function VercelSync({ onMessage }) {
export default function VercelSync({ onMessage, authFetch }) {
const [vercelToken, setVercelToken] = useState('')
const [projectId, setProjectId] = useState('')
const [teamId, setTeamId] = useState('')
@@ -8,11 +8,14 @@ export default function VercelSync({ onMessage }) {
const [result, setResult] = useState(null)
const [preconfig, setPreconfig] = useState(null)
// 使用 authFetch 或回退到普通 fetch
const apiFetch = authFetch || fetch
// 自动加载预配置的 Vercel 信息
useEffect(() => {
const loadPreconfig = async () => {
try {
const res = await fetch('/admin/vercel/config')
const res = await apiFetch('/admin/vercel/config')
if (res.ok) {
const data = await res.json()
setPreconfig(data)
@@ -42,7 +45,7 @@ export default function VercelSync({ onMessage }) {
setLoading(true)
setResult(null)
try {
const res = await fetch('/admin/vercel/sync', {
const res = await apiFetch('/admin/vercel/sync', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({