คุณจัดการการรับรองความถูกต้องในแอป Next.js App Router อย่างไร

Question

Accepted Answer

การรับรองความถูกต้องใน App Router ครอบคลุมหลายชั้น — เซสชัน middleware การตรวจสอบฝั่งเซิร์ฟเวอร์ และการปกป้อง Server Actions แนวทางสมัยใหม่นิยมชื่นชอบ **การตรวจสอบเซสชันฝั่งเซิร์ฟเวอร์** มากกว่าการตรวจสอบฝั่งไคลเอนต์เท่านั้น ## กลยุทธ์เซสชัน ```text Cookie-based sessions (httpOnly cookie): ✓ Store a signed session id or encrypted JWT in an httpOnly, secure cookie ✓ httpOnly = not readable by JavaScript → protects against XSS token theft ✓ Use a library: Auth.js (NextAuth), Clerk, Lucia, or a custom solution ``` ## 1. การปิดกั้นคร่าวๆ ใน middleware (รวดเร็ว แต่ไม่ใช่เรื่องราวทั้งหมด) ```ts // middleware.ts — quick check: does a session cookie exist? export function middleware(req: NextRequest) { const session = req.cookies.get("session")?.value; if (req.nextUrl.pathname.startsWith("/dashboard") && !session) { return NextResponse.redirect(new URL("/login", req.url)); } return NextResponse.next(); } ``` Middleware ทำงานบน Edge ก่อนการร้องขอที่ตรงกันทุกครั้ง — เหมาะสำหรับการเปลี่ยนเส้นทางที่ราคาถูก แต่ควรทำการตรวจสอบเพียง *เบา* เท่านั้น อย่าพึ่งพามันเป็นการอนุญาตเพียงอย่างเดียว (คุกกี้อาจใช้ไม่ได้) ## 2. ตรวจสอบเซสชันที่คุณใช้ข้อมูล (ประตูจริง) ```tsx // app/dashboard/page.tsx — verify on the server, in the page itself import { redirect } from "next/navigation"; export default async function Dashboard() { const user = await getCurrentUser(); // validates the session cookie server-side if (!user) redirect("/login"); // authoritative check return

Welcome {user.name}

; } ``` การตรวจสอบเซสชันฝั่งเซิร์ฟเวอร์นี้ (ใน Server Component) เป็น **การตรวจสอบที่เป็นอำนาจ** — โดยปฏิบัติจริงแล้วจะตรวจสอบเซสชันและโหลดผู้ใช้ ## 3. ปกป้อง Server Actions และ Route Handlers ด้วย ```tsx "use server"; export async function deletePost(id: string) { const user = await getCurrentUser(); if (!user) throw new Error("Unauthorized"); // never trust the caller if (post.authorId !== user.id) throw new Error("Forbidden"); // authorization await db.post.delete({ where: { id } }); } ``` Server Actions เป็นจุดปลายายสาธารณะ — **ตรวจสอบการรับรองความถูกต้องและการอนุญาต ทุกครั้งภายในนั้น** โดยไม่คำนึงถึงการปิดกั้นระดับ UI ## เหตุใดการตรวจสอบแบบหลายชั้น ```text Middleware → fast redirect for the common case (better UX, not security-critical) Server Component/Action → real verification (security boundary) Never rely on hiding UI in the client as a security measure ``` ## ทำไมจึงสำคัญ การรับรองความถูกต้องใน App Router คือการป้องกันแบบเลึกลึก: คุกกี้ httpOnly (เซสชันที่ปลอดภัยจาก XSS) middleware สำหรับการเปลี่ยนเส้นทางอย่างรวดเร็ว และ — สำคัญมากที่สุด — **การตรวจสอบฝั่งเซิร์ฟเวอร์ที่จุดการเข้าถึงและการเปลี่ยนแปลงข้อมูลทุกจุด** ข้อผิดพลาดทั่วไปและอันตรายคือการปฏิบัติต่อการตรวจสอบ middleware หรือ UI ไคลเอนต์ที่ซ่อนไว้เหมือนว่าเพียงพอ การป้องกันที่แท้จริงมาจากการตรวจสอบเซสชันและการอนุญาตบนเซิร์ฟเวอร์ทุกที่ที่อ่านหรือเปลี่ยนแปลงข้อมูลที่ละเอียดอ่อน