做 ip 防呆機制
This commit is contained in:
196
app/test/ip-test/page.tsx
Normal file
196
app/test/ip-test/page.tsx
Normal file
@@ -0,0 +1,196 @@
|
||||
'use client'
|
||||
|
||||
import { useState } from 'react'
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
import { Alert, AlertDescription } from '@/components/ui/alert'
|
||||
import { Globe, ExternalLink, Info, CheckCircle, AlertCircle } from 'lucide-react'
|
||||
|
||||
export default function IpTestPage() {
|
||||
const [externalIp, setExternalIp] = useState<string | null>(null)
|
||||
const [loading, setLoading] = useState(false)
|
||||
const [error, setError] = useState<string | null>(null)
|
||||
|
||||
const fetchExternalIp = async () => {
|
||||
setLoading(true)
|
||||
setError(null)
|
||||
try {
|
||||
const response = await fetch('https://api.ipify.org?format=json')
|
||||
if (!response.ok) {
|
||||
throw new Error('無法獲取外部IP')
|
||||
}
|
||||
const data = await response.json()
|
||||
setExternalIp(data.ip)
|
||||
} catch (error) {
|
||||
console.error('Error fetching external IP:', error)
|
||||
setError('無法獲取外部IP地址')
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="container mx-auto p-6 max-w-4xl space-y-6">
|
||||
<div className="text-center">
|
||||
<h1 className="text-3xl font-bold mb-2">IP 測試工具</h1>
|
||||
<p className="text-muted-foreground">測試你的真實公網IP地址</p>
|
||||
</div>
|
||||
|
||||
{/* 說明 */}
|
||||
<Alert>
|
||||
<Info className="h-4 w-4" />
|
||||
<AlertDescription>
|
||||
<div className="font-medium mb-2">為什麼會顯示 127.0.0.1？</div>
|
||||
<div className="text-sm space-y-1">
|
||||
<div>• 在本地開發環境中，所有請求都來自本地回環地址</div>
|
||||
<div>• 這是正常的行為，不是錯誤</div>
|
||||
<div>• 在生產環境中部署後，IP檢測會更準確</div>
|
||||
<div>• 你可以使用下面的工具測試你的真實公網IP</div>
|
||||
</div>
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
|
||||
{/* 外部IP檢測 */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<Globe className="w-5 h-5" />
|
||||
真實公網IP檢測
|
||||
</CardTitle>
|
||||
<CardDescription>
|
||||
從外部服務獲取你的真實公網IP地址
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="flex items-center gap-4">
|
||||
<Button
|
||||
onClick={fetchExternalIp}
|
||||
disabled={loading}
|
||||
className="flex items-center gap-2"
|
||||
>
|
||||
<ExternalLink className="w-4 h-4" />
|
||||
{loading ? '檢測中...' : '檢測真實IP'}
|
||||
</Button>
|
||||
|
||||
{externalIp && (
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="font-medium">你的公網IP:</span>
|
||||
<Badge variant="default" className="flex items-center gap-1">
|
||||
<CheckCircle className="w-3 h-3" />
|
||||
{externalIp}
|
||||
</Badge>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<Alert variant="destructive">
|
||||
<AlertCircle className="h-4 w-4" />
|
||||
<AlertDescription>{error}</AlertDescription>
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
<div className="text-sm text-muted-foreground">
|
||||
<p>這個IP地址就是你的真實公網IP，可以用於：</p>
|
||||
<ul className="list-disc list-inside mt-2 space-y-1">
|
||||
<li>配置IP白名單</li>
|
||||
<li>測試IP檢測功能</li>
|
||||
<li>驗證網路配置</li>
|
||||
</ul>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* 測試方法 */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>測試真實IP的方法</CardTitle>
|
||||
<CardDescription>幾種測試IP檢測功能的方法</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="space-y-3">
|
||||
<div>
|
||||
<h4 className="font-medium mb-2">1. 使用 ngrok 進行外部測試</h4>
|
||||
<div className="text-sm text-muted-foreground space-y-1">
|
||||
<p>• 安裝 ngrok: <code className="bg-muted px-1 rounded">npm install -g ngrok</code></p>
|
||||
<p>• 啟動隧道: <code className="bg-muted px-1 rounded">ngrok http 3000</code></p>
|
||||
<p>• 使用 ngrok 提供的URL訪問你的應用</p>
|
||||
<p>• 這樣就能測試真實的IP檢測功能</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4 className="font-medium mb-2">2. 部署到生產環境</h4>
|
||||
<div className="text-sm text-muted-foreground space-y-1">
|
||||
<p>• 部署到 Vercel、Netlify 或其他平台</p>
|
||||
<p>• 在生產環境中，IP檢測會更準確</p>
|
||||
<p>• 可以測試真實的IP白名單功能</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4 className="font-medium mb-2">3. 使用代理服務器</h4>
|
||||
<div className="text-sm text-muted-foreground space-y-1">
|
||||
<p>• 配置 Nginx 或 Apache 作為反向代理</p>
|
||||
<p>• 確保正確設置 IP 轉發頭</p>
|
||||
<p>• 這樣可以模擬生產環境的IP檢測</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* 配置建議 */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>配置建議</CardTitle>
|
||||
<CardDescription>根據不同環境的配置建議</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<h4 className="font-medium mb-2">本地開發環境</h4>
|
||||
<div className="text-sm text-muted-foreground">
|
||||
<p>在 <code className="bg-muted px-1 rounded">.env.local</code> 中設置：</p>
|
||||
<pre className="bg-muted p-2 rounded mt-2 text-xs">
|
||||
{`# 禁用IP白名單檢查
|
||||
ENABLE_IP_WHITELIST=false
|
||||
|
||||
# 或者允許本地IP
|
||||
ALLOWED_IPS=127.0.0.1,192.168.1.0/24`}
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4 className="font-medium mb-2">生產環境</h4>
|
||||
<div className="text-sm text-muted-foreground">
|
||||
<p>在生產環境中設置：</p>
|
||||
<pre className="bg-muted p-2 rounded mt-2 text-xs">
|
||||
{`# 啟用IP白名單
|
||||
ENABLE_IP_WHITELIST=true
|
||||
|
||||
# 設置允許的IP地址
|
||||
ALLOWED_IPS=你的真實IP地址,其他允許的IP`}
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* 快速連結 */}
|
||||
<div className="flex justify-center gap-4">
|
||||
<Button variant="outline" onClick={() => window.open('/test/ip-debug', '_blank')}>
|
||||
<Globe className="w-4 h-4 mr-2" />
|
||||
詳細IP調試
|
||||
</Button>
|
||||
<Button variant="outline" onClick={() => window.open('/api/ip', '_blank')}>
|
||||
<ExternalLink className="w-4 h-4 mr-2" />
|
||||
IP API 端點
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user