File size: 3,071 Bytes
3bbb98d |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 |
'use client';
import { useEffect, useState } from 'react';
import { apiUrl } from '@/lib/constants';
import { getAdminToken, setAdminToken } from '@/lib/adminAuth';
interface AdminAccessGateProps {
children: React.ReactNode;
}
export default function AdminAccessGate({ children }: AdminAccessGateProps) {
const [tokenInput, setTokenInput] = useState('');
const [verified, setVerified] = useState(false);
const [loading, setLoading] = useState(false);
const [error, setError] = useState('');
useEffect(() => {
const saved = getAdminToken();
if (saved) {
setTokenInput(saved);
verifyToken(saved);
}
}, []);
const verifyToken = async (tokenToVerify: string) => {
if (!tokenToVerify) {
setError('请输入 admin token');
return;
}
setLoading(true);
setError('');
try {
const response = await fetch(`${apiUrl}/auth/verify?token=${encodeURIComponent(tokenToVerify)}`, {
headers: { 'x-admin-token': tokenToVerify },
});
if (!response.ok) {
setVerified(false);
setError('Token 验证失败，请重试');
return;
}
setAdminToken(tokenToVerify);
setVerified(true);
setError('');
} catch (err) {
console.error('Error verifying token', err);
setError('无法验证 token，请稍后再试');
} finally {
setLoading(false);
}
};
if (verified) {
return <>{children}</>;
}
return (
<div className="min-h-screen flex items-center justify-center bg-background text-text-primary p-6">
<div className="w-full max-w-md bg-surface/80 border border-surface-hover rounded-2xl shadow-2xl p-6 space-y-5">
<div>
<p className="text-sm uppercase tracking-wide text-text-secondary">Private Space Access</p>
<h1 className="text-2xl font-bold mt-1">Enter Admin Token</h1>
<p className="text-sm text-text-secondary mt-2">
这个站点是私有的，访问前需要输入管理员 token。
</p>
</div>
<div className="space-y-3">
<label className="block text-sm text-text-secondary">Admin token</label>
<input
type="password"
className="input w-full"
placeholder="例如：my-secret-token"
value={tokenInput}
onChange={(e) => setTokenInput(e.target.value)}
onKeyDown={(e) => {
if (e.key === 'Enter') {
verifyToken(tokenInput);
}
}}
disabled={loading}
/>
{error && <p className="text-red-400 text-sm">{error}</p>}
</div>
<button
className="btn btn-primary w-full"
onClick={() => verifyToken(tokenInput)}
disabled={loading}
>
{loading ? '验证中...' : '进入我的空间'}
</button>
<p className="text-xs text-text-secondary text-center">
如需重置或更换 token，请刷新页面重新输入。
</p>
</div>
</div>
);
}
|