Pengurusan Sesi & Cangkuk useSession
Akses data sesi dalam komponen pelayan dan klien serta lindungi halaman berdasarkan status pengesahan.
Pengurusan Sesi & Cangkuk useSession ialah pelajaran React Academy percuma di CoddyKit. Ini ialah pelajaran 2 daripada 4. Anda boleh membaca keseluruhan pelajaran di bawah secara percuma — kemudian berlatih secara praktikal dalam pelayar menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran React Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus React Academy merangkumi sejumlah 4 pelajaran.
Jenis Sesi dalam Auth.js
Auth.js menyokong dua strategi sesi: JWT (lalai, token tanpa keadaan dalam kuki) dan pangkalan data (rekod sesi dalam pangkalan data yang boleh dibatalkan pada bahagian pelayan).
useSession dalam Komponen Klien
useSession() ialah hook Komponen Klien yang membaca sesi semasa. Ia mengembalikan data (sesi), status ('loading' | 'authenticated' | 'unauthenticated'), dan fungsi 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 ?? ''} />;
}Persediaan SessionProvider
Bungkus aplikasi anda atau pepohon Komponen Klien dalam SessionProvider supaya useSession boleh mengakses konteks sesi.
// 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() dalam Komponen Pelayan
Untuk Komponen Pelayan, gunakan auth() secara terus — tiada hook dan tiada penyedia diperlukan. Ia membaca sesi daripada kuki pada bahagian pelayan.
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>
);
}Melindungi Laluan Klien
Gunakan useSession dengan pilihan required: true untuk mengubah hala pengguna yang tidak disahkan secara automatik ke halaman log masuk.
'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>;
}Mengemas Kini Sesi
Panggil fungsi update() yang dikembalikan oleh useSession untuk menyegarkan sesi, contohnya selepas kemas kini profil, tanpa perlu log keluar dan log masuk semula.
const { data: session, update } = useSession();
async function handleNameChange(newName: string) {
await updateUserName(newName); // API call
await update({ user: { name: newName } }); // refresh session
}Panggilan Balik Sesi JWT
Gunakan panggilan balik jwt untuk menambahkan data tersuai kepada token JWT semasa log masuk, dan panggilan balik session untuk mendedahkannya dalam objek sesi.
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;
},
},Tamat Tempoh Sesi
Konfigurasikan umur maksimum sesi dalam konfigurasi Auth.js. Sesi JWT disegarkan secara automatik pada setiap permintaan apabila aktif.
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
},
});Membatalkan Sesi Pangkalan Data
Sesi pangkalan data boleh dibatalkan pada bahagian pelayan, yang berguna untuk memaksa log keluar. Padamkan rekod sesi daripada pangkalan data untuk membatalkannya serta-merta.
// 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');
}Akses Berasaskan Peranan dalam Komponen Klien
Baca peranan sesi daripada useSession dan paparkan antara muka pengguna secara bersyarat berdasarkan peranan tersebut.
const { data: session } = useSession();
const isAdmin = session?.user?.role === 'admin';
return (
<>
{isAdmin && <AdminPanel />}
<UserContent />
</>
);Semakan Pantas
Penyedia manakah yang mesti membungkus aplikasi anda supaya useSession() berfungsi dalam Komponen Klien?
Ringkasan
Gunakan auth() untuk mengakses sesi dalam Komponen Pelayan dan useSession() dalam Komponen Klien yang dibungkus oleh SessionProvider. Tambahkan data tersuai melalui panggilan balik JWT atau sesi, kemas kini sesi pada klien dengan update(), dan konfigurasikan maxAge untuk tamat tempoh sesi.
Pelajari React dengan tutor kecerdasan buatan — percuma
Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.
- Kursus
- 88
- Pelajaran
- 324
Soalan Lazim
Adakah pelajaran “Pengurusan Sesi & Cangkuk useSession” percuma?
Ya — teks penuh “Pengurusan Sesi & Cangkuk useSession” boleh dibaca secara percuma di web ini. Untuk berlatih secara interaktif menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7, serta membuka kunci baki kursus React Academy, tingkat taraf kepada CoddyKit PRO. Kursus React Academy merangkumi sejumlah 4 pelajaran.
Apakah yang akan saya pelajari dalam “Pengurusan Sesi & Cangkuk useSession”?
Akses data sesi dalam komponen pelayan dan klien serta lindungi halaman berdasarkan status pengesahan. Anda berlatih React Academy menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.
Adakah saya memerlukan pengalaman untuk memulakan React Academy?
Tiada pengalaman terdahulu diperlukan. Pembelajaran React Academy di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 2 daripada 4.
Berapa lamakah pelajaran “Pengurusan Sesi & Cangkuk useSession” diambil?
Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.
Bolehkah saya menulis dan menjalankan kod dalam pelajaran React Academy ini?
Ya. Setiap pelajaran React Academy menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.
Semua pelajaran dalam kursus ini
- Menyediakan Auth.js dalam Penghala Aplikasi Next.js
- Pengurusan Sesi & Cangkuk useSession
- Penyedia Kelayakan & Log Masuk Tersuai
- Perlindungan Laluan Berasaskan Perisian Tengah