修正手機板查看 ip 資訊

middleware.ts

@@ -1,6 +1,6 @@
 import { NextResponse } from 'next/server'
 import type { NextRequest } from 'next/server'
-import { isIpAllowed, getClientIp } from '@/lib/ip-utils'
+import { isIpAllowed, getClientIp, isValidIp, isValidIPv6 } from '@/lib/ip-utils'
 
 export function middleware(request: NextRequest) {
   // 檢查是否啟用IP白名單
@@ -11,13 +11,24 @@ export function middleware(request: NextRequest) {
   }
 
   // 獲取客戶端IP - 使用與API相同的邏輯
-  const clientIp = getClientIp(request)
+  let clientIp = getClientIp(request)
+  
+  // 根據你的環境，優先使用 cf-connecting-ip (支持IPv4和IPv6)
+  const cfConnectingIp = request.headers.get('cf-connecting-ip')
+  if (cfConnectingIp && cfConnectingIp.trim() !== '') {
+    const cleanCfIp = cfConnectingIp.trim()
+    // 检查是否是有效的IPv4或IPv6地址
+    if (isValidIp(cleanCfIp) || isValidIPv6(cleanCfIp)) {
+      clientIp = cleanCfIp
+      console.log(`[Middleware] 使用 cf-connecting-ip: ${clientIp} ${isValidIPv6(clientIp) ? '(IPv6)' : '(IPv4)'}`)
+    }
+  }
   
   // 獲取允許的IP列表
   const allowedIps = process.env.ALLOWED_IPS || ''
   
   // 調試信息
-  console.log(`[Middleware] IP檢測: ${clientIp}, 路徑: ${request.nextUrl.pathname}`)
+  console.log(`[Middleware] 最終IP檢測: ${clientIp}, 路徑: ${request.nextUrl.pathname}`)
   console.log(`[Middleware] 白名單狀態: ${enableIpWhitelist}`)
   console.log(`[Middleware] 允許的IP: ${allowedIps}`)
   

test-mobile-blocking.md

@@ -0,0 +1,84 @@
+# 📱 手机IPv6阻挡功能测试指南
+
+## 🔍 问题描述
+- 手机访问时显示 `127.0.0.1` 和"拒絕"状态
+- 但实际上没有被真正阻挡，仍然可以访问网页
+- 需要正确检测IPv6地址并实现真正的阻挡
+
+## 📊 你的手机HTTP头部信息
+```
+cf-connecting-ip: 2001:b400:e70a:cf29:4f91:d294:1e4f:df44 ← 真实IPv6地址
+x-real-ip: 162.158.167.181 ← IPv4代理地址
+```
+
+## ✅ 已修复的问题
+1. **中间件IP检测逻辑** - 现在使用与API相同的逻辑
+2. **IPv6支持** - 优先使用 `cf-connecting-ip` 头部
+3. **真正阻挡** - 不在白名单的IP会看到403错误页面
+4. **调试日志** - 添加详细的中间件日志
+
+## 🎯 预期结果
+
+### 情况1: IPv6地址在白名单中
+- ✅ 中间件检测到: `2001:b400:e70a:cf29:4f91:d294:1e4f:df44`
+- ✅ 允许访问所有网页
+- ✅ 显示"允許"状态
+
+### 情况2: IPv6地址不在白名单中
+- ✅ 中间件检测到: `2001:b400:e70a:cf29:4f91:d294:1e4f:df44`
+- ❌ 显示403 Forbidden错误页面
+- ❌ 无法访问任何网页内容
+
+## 🔧 白名单配置
+
+在 `.env.local` 文件中添加你的IPv6地址：
+```
+ENABLE_IP_WHITELIST=true
+ALLOWED_IPS="114.33.18.13,2001:b400:e70a:cf29:4f91:d294:1e4f:df44,125.229.65.83,60.248.164.91,220.132.236.89,211.72.69.222,219.87.170.253,125.228.50.228,218.161.107.138"
+```
+
+## 🚀 测试步骤
+
+### 测试1: 正常访问（IPv6在白名单中）
+1. 确保IPv6地址在 `ALLOWED_IPS` 中
+2. 重启应用
+3. 用手机访问网站
+4. 应该能正常访问，显示"允許"状态
+
+### 测试2: 阻挡功能（IPv6不在白名单中）
+1. 临时从 `ALLOWED_IPS` 中移除IPv6地址
+2. 重启应用
+3. 用手机访问网站
+4. 应该看到403 Forbidden错误页面
+5. **重要**: 测试完成后立即将IPv6地址加回白名单
+
+## 📝 调试方法
+
+### 检查服务器日志
+重启应用后，查看服务器控制台日志：
+```
+[Middleware] 使用 cf-connecting-ip: 2001:b400:e70a:cf29:4f91:d294:1e4f:df44 (IPv6)
+[Middleware] 最終IP檢測: 2001:b400:e70a:cf29:4f91:d294:1e4f:df44, 路徑: /
+[Middleware] 白名單狀態: true
+[Middleware] 允許的IP: 114.33.18.13,2001:b400:e70a:cf29:4f91:d294:1e4f:df44,...
+```
+
+### 访问调试页面
+- `/test/ip-debug` - 查看详细IP信息
+- `/test/ip-diagnostic` - 查看完整诊断
+- `/test/ip-blocking` - 测试阻挡功能
+
+## ⚠️ 重要提醒
+
+1. **测试安全**: 测试阻挡功能时，确保有其他方式访问服务器
+2. **配置备份**: 测试前备份 `.env.local` 文件
+3. **及时恢复**: 测试完成后立即将IPv6地址加回白名单
+4. **重启应用**: 每次修改配置后都要重启应用
+
+## 🎉 修复完成
+
+现在你的网站应该能够：
+- ✅ 正确检测手机的IPv6地址
+- ✅ 真正阻挡不在白名单中的IP
+- ✅ 显示403 Forbidden错误页面而不是"拒絕"状态
+- ✅ 完全阻止未授权访问