การจัดการเซสชันและฮุก useSession
เข้าถึงข้อมูลเซสชันในคอมโพเนนต์ฝั่งเซิร์ฟเวอร์และฝั่งไคลเอ็นต์ และป้องกันหน้าตามสถานะการยืนยันตัวตน
การจัดการเซสชันและฮุก useSession เป็นบทเรียน React Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน React Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส React Academy มีบทเรียนทั้งหมด 4 บทเรียน
ชนิดเซสชันใน Auth.js
Auth.js รองรับกลยุทธ์เซสชันสองแบบ: JWT (ค่าเริ่มต้น เป็นโทเค็นแบบไร้สถานะในคุกกี้) และ ฐานข้อมูล (ระเบียนเซสชันในฐานข้อมูล ซึ่งเพิกถอนจากฝั่งเซิร์ฟเวอร์ได้)
useSession ในคอมโพเนนต์ฝั่งไคลเอนต์
useSession() คือฮุกของคอมโพเนนต์ฝั่งไคลเอนต์ที่อ่านเซสชันปัจจุบัน โดยส่งคืน data (เซสชัน), status ('loading' | 'authenticated' | 'unauthenticated') และฟังก์ชัน update
'use client';
import { useSession } from 'next-auth/react';
export function UserAvatar() {
const { data: session, status } = useSession();
if (status === 'loading') return <Spinner />;
if (status === 'unauthenticated') return <Link href="/login">Sign in</Link>;
return <img src={session.user?.image ?? ''} alt={session.user?.name ?? ''} />;
}ตั้งค่า SessionProvider
ห่อแอปของคุณ (หรือส่วนย่อยของคอมโพเนนต์ฝั่งไคลเอนต์) ด้วย SessionProvider เพื่อให้ useSession เข้าถึงบริบทของเซสชันได้
// app/providers.tsx
'use client';
import { SessionProvider } from 'next-auth/react';
export function Providers({ children }: { children: React.ReactNode }) {
return <SessionProvider>{children}</SessionProvider>;
}
// app/layout.tsx
import { Providers } from './providers';
export default function RootLayout({ children }) {
return <html><body><Providers>{children}</Providers></body></html>;
}auth() ในคอมโพเนนต์ฝั่งเซิร์ฟเวอร์
สำหรับคอมโพเนนต์ฝั่งเซิร์ฟเวอร์ ให้ใช้ auth() โดยตรง ไม่ต้องใช้ฮุกหรือผู้ให้บริการ เพราะฟังก์ชันนี้อ่านเซสชันจากคุกกี้ฝั่งเซิร์ฟเวอร์
import { auth } from '@/auth';
export default async function Header() {
const session = await auth();
return (
<nav>
{session ? (
<span>Hello, {session.user?.name}</span>
) : (
<Link href="/login">Sign in</Link>
)}
</nav>
);
}ป้องกันเส้นทางฝั่งไคลเอนต์
ใช้ useSession พร้อมตัวเลือก required: true เพื่อเปลี่ยนเส้นทางผู้ใช้ที่ยังไม่ได้ยืนยันตัวตนไปยังหน้าเข้าสู่ระบบโดยอัตโนมัติ
'use client';
import { useSession } from 'next-auth/react';
export default function ProtectedPage() {
const { data: session } = useSession({ required: true });
// session is never null here — unauthenticated users are redirected
return <div>Welcome, {session?.user?.name}</div>;
}อัปเดตเซสชัน
เรียกใช้ฟังก์ชัน update() ที่ส่งคืนโดย useSession เพื่อรีเฟรชเซสชัน เช่น หลังอัปเดตโปรไฟล์ โดยไม่ต้องออกจากระบบแล้วเข้าสู่ระบบใหม่
const { data: session, update } = useSession();
async function handleNameChange(newName: string) {
await updateUserName(newName); // API call
await update({ user: { name: newName } }); // refresh session
}ฟังก์ชันเรียกกลับของเซสชัน JWT
ใช้ฟังก์ชันเรียกกลับ jwt เพื่อเพิ่มข้อมูลแบบกำหนดเองลงในโทเค็น JWT เมื่อเข้าสู่ระบบ และใช้ฟังก์ชันเรียกกลับ session เพื่อเปิดเผยข้อมูลนั้นในออบเจ็กต์เซสชัน
callbacks: {
async jwt({ token, user }) {
if (user) token.role = user.role; // add on first sign-in
return token;
},
async session({ session, token }) {
session.user.role = token.role as string;
return session;
},
},การหมดอายุของเซสชัน
กำหนดอายุสูงสุดของเซสชันในการตั้งค่า Auth.js เซสชัน JWT จะรีเฟรชโดยอัตโนมัติในทุกคำขอขณะที่มีการใช้งาน
export const { handlers, auth } = NextAuth({
session: {
strategy: 'jwt',
maxAge: 30 * 24 * 60 * 60, // 30 days
updateAge: 24 * 60 * 60, // refresh if older than 1 day
},
});เพิกถอนเซสชันในฐานข้อมูล
เซสชันในฐานข้อมูลสามารถเพิกถอนจากฝั่งเซิร์ฟเวอร์ได้ ซึ่งมีประโยชน์สำหรับการบังคับออกจากระบบ ให้ลบระเบียนเซสชันออกจากฐานข้อมูลเพื่อทำให้เซสชันนั้นใช้ไม่ได้ทันที
// Server Action to log out all devices:
async function logOutAllDevices() {
'use server';
const session = await auth();
if (session) await db.session.deleteMany({ where: { userId: session.user.id } });
redirect('/login');
}การเข้าถึงตามบทบาทในคอมโพเนนต์ฝั่งไคลเอนต์
อ่านบทบาทของเซสชันจาก useSession และเรนเดอร์ส่วนติดต่อผู้ใช้ตามเงื่อนไขโดยอิงจากบทบาทนั้น
const { data: session } = useSession();
const isAdmin = session?.user?.role === 'admin';
return (
<>
{isAdmin && <AdminPanel />}
<UserContent />
</>
);ตรวจสอบความเข้าใจ
ผู้ให้บริการใดต้องห่อแอปของคุณเพื่อให้ useSession() ทำงานในคอมโพเนนต์ฝั่งไคลเอนต์ได้
สรุป
ใช้ auth() เพื่อเข้าถึงเซสชันในคอมโพเนนต์ฝั่งเซิร์ฟเวอร์ และใช้ useSession() ในคอมโพเนนต์ฝั่งไคลเอนต์ที่ห่อด้วย SessionProvider เพิ่มข้อมูลแบบกำหนดเองผ่านฟังก์ชันเรียกกลับของ JWT/เซสชัน อัปเดตเซสชันฝั่งไคลเอนต์ด้วย update() และกำหนด maxAge สำหรับการหมดอายุของเซสชัน
คำถามที่พบบ่อย
บทเรียน “การจัดการเซสชันและฮุก useSession” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “การจัดการเซสชันและฮุก useSession” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส React Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส React Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “การจัดการเซสชันและฮุก useSession”
เข้าถึงข้อมูลเซสชันในคอมโพเนนต์ฝั่งเซิร์ฟเวอร์และฝั่งไคลเอ็นต์ และป้องกันหน้าตามสถานะการยืนยันตัวตน คุณปฏิบัติ React Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน React Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน React Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน
บทเรียน “การจัดการเซสชันและฮุก useSession” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน React Academy นี้ได้ไหม
ได้ บทเรียน React Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- การตั้งค่า Auth.js ใน Next.js App Router
- การจัดการเซสชันและฮุก useSession
- ผู้ให้บริการข้อมูลรับรองและการเข้าสู่ระบบแบบกำหนดเอง
- การป้องกันเส้นทางด้วยมิดเดิลแวร์