feat: add authentication middleware and login page

Author: coderzc

app/api/auth/route.ts

@@ -0,0 +1,40 @@
+import { NextResponse } from 'next/server';
+
+export async function POST(request: Request) {
+  try {
+    const { password } = await request.json();
+    const correctPassword = process.env.AUTH_PASSWORD;
+
+    if (!correctPassword) {
+      return NextResponse.json(
+        { error: 'Authentication not configured' },
+        { status: 500 }
+      );
+    }
+
+    if (password === correctPassword) {
+      // Create the response
+      const response = NextResponse.json({ success: true });
+      
+      // Set the authentication cookie
+      response.cookies.set('authenticated', 'true', {
+        httpOnly: true,
+        secure: process.env.NODE_ENV === 'production',
+        sameSite: 'lax',
+        maxAge: 7 * 24 * 60 * 60 // 7 days
+      });
+
+      return response;
+    }
+
+    return NextResponse.json(
+      { error: 'Invalid password' },
+      { status: 401 }
+    );
+  } catch (error) {
+    return NextResponse.json(
+      { error: 'Internal server error' },
+      { status: 500 }
+    );
+  }
+} 

app/auth/page.tsx

@@ -0,0 +1,5 @@
+import { AuthPage } from '@/components/auth-page';
+
+export default function Page() {
+  return <AuthPage />;
+} 

components/auth-page.tsx

@@ -0,0 +1,68 @@
+'use client';
+
+import { useRouter } from 'next/navigation';
+import { useState } from 'react';
+import { Button } from './ui/button';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from './ui/card';
+import { Input } from './ui/input';
+
+export function AuthPage() {
+  const [password, setPassword] = useState('');
+  const [error, setError] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+  const router = useRouter();
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setIsLoading(true);
+    setError('');
+    
+    try {
+      const response = await fetch('/api/auth', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({ password }),
+      });
+
+      if (response.ok) {
+        router.refresh(); // 刷新页面以更新认证状态
+        router.push('/');
+      } else {
+        const data = await response.json();
+        setError(data.error || '密码错误');
+      }
+    } catch (err) {
+      setError('验证失败，请重试');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <div className="flex h-screen items-center justify-center bg-background">
+      <Card className="w-[350px]">
+        <CardHeader>
+          <CardTitle>访问验证</CardTitle>
+          <CardDescription>请输入访问密码</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <form onSubmit={handleSubmit} className="space-y-4">
+            <Input
+              type="password"
+              placeholder="请输入密码"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              disabled={isLoading}
+            />
+            {error && <p className="text-sm text-red-500">{error}</p>}
+            <Button type="submit" className="w-full" disabled={isLoading}>
+              {isLoading ? '验证中...' : '确认'}
+            </Button>
+          </form>
+        </CardContent>
+      </Card>
+    </div>
+  );
+} 

middleware.ts

@@ -0,0 +1,36 @@
+import type { NextRequest } from 'next/server';
+import { NextResponse } from 'next/server';
+
+export function middleware(request: NextRequest) {
+  // 检查是否需要鉴权
+  const authPassword = process.env.AUTH_PASSWORD;
+  if (!authPassword) {
+    return NextResponse.next();
+  }
+
+  // 排除不需要鉴权的路径
+  if (
+    request.nextUrl.pathname.startsWith('/api/auth') ||
+    request.nextUrl.pathname.startsWith('/_next') ||
+    request.nextUrl.pathname.startsWith('/favicon.ico')
+  ) {
+    return NextResponse.next();
+  }
+
+  // 检查认证状态
+  const isAuthenticated = request.cookies.get('authenticated');
+  if (!isAuthenticated && request.nextUrl.pathname !== '/auth') {
+    return NextResponse.redirect(new URL('/auth', request.url));
+  }
+
+  // 如果已认证且访问 /auth 页面，重定向到首页
+  if (isAuthenticated && request.nextUrl.pathname === '/auth') {
+    return NextResponse.redirect(new URL('/', request.url));
+  }
+
+  return NextResponse.next();
+}
+
+export const config = {
+  matcher: ['/((?!api/auth|_next/static|_next/image|favicon.ico).*)']
+};