إدارة الجلسات وuseSession Hook
يمكنك الوصول إلى بيانات الجلسة في مكوّنات الخادم والعميل وحماية الصفحات بناءً على حالة المصادقة.
إدارة الجلسات وuseSession Hook درس مجاني في React Academy على CoddyKit. هذا هو الدرس 2 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 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 Hook» مجاني؟
نعم — نص درس «إدارة الجلسات وuseSession Hook» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة React Academy، انتقل إلى CoddyKit PRO. تتضمن دورة React Academy 4 دروس في المجموع.
ماذا ستتعلم في «إدارة الجلسات وuseSession Hook»؟
يمكنك الوصول إلى بيانات الجلسة في مكوّنات الخادم والعميل وحماية الصفحات بناءً على حالة المصادقة. تتمرن على React Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ React Academy؟
لا تُشترط خبرة سابقة. React Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 2 من أصل 4.
كم من الوقت يستغرق درس «إدارة الجلسات وuseSession Hook»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس React Academy هذا؟
نعم. كل درس في React Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- إعداد Auth.js في Next.js App Router
- إدارة الجلسات وuseSession Hook
- موفّر بيانات الاعتماد وتسجيل الدخول المخصص
- حماية المسارات المستندة إلى Middleware