الدرس 4 / 6⏱ 30 دقيقة

حماية المسارات

clerkMiddleware، auth.protect، الحماية حسب الأدوار

إدارة المستخدمين

يوفر Clerk نظاماً كاملاً لإدارة المستخدمين يشمل الملفات الشخصية للمستخدمين والمنظمات وإدارة الجلسات.

الملفات الشخصية للمستخدمين

javascript
import { useUser } from '@clerk/nextjs';

function UserProfile() {
  const { isLoaded, isSignedIn, user } = useUser();
  
  if (!isLoaded) return <div>جاري التحميل...</div>;
  if (!isSignedIn) return null;
  
  return (
    <div>
      <p>الاسم: {user.fullName}</p>
      <p>البريد الإلكتروني: {user.primaryEmailAddress}</p>
    </div>
  );
}

المنظمات

المنظمات تسمح للمستخدمين بالانتماء إلى فرق أو شركات مع تحكم في الوصول بالأدوار.

javascript
import { useOrganization } from '@clerk/nextjs';

const { organization } = useOrganization();

Webhooks

Webhooks تُبلغ تطبيقك عندما تحدث أحداث في Clerk (إنشاء مستخدم، تحديث، حذف). قم بتكوينها في لوحة التحكم تحت Webhooks.

ملخص الدرس

يوفر Clerk hook useUser للوصول إلى بيانات المستخدم.

المنظمات تمكّن التحكم في الوصول القائم على الفرق.

Webhooks تُبلغ تطبيقك بأحداث المستخدمين.

❓Quiz

كيف تصل إلى بيانات المستخدم الحالي في Clerk؟

❓Quiz

ما هي المنظمات في Clerk؟

🎯نفذ إدارة المستخدمين

أنشئ صفحة ملف شخصي للمستخدم ونفذ منظمات لإدارة الفريق.

الحل:

javascript
// الحل المتوقع لـ proxy.ts
import { clerkMiddleware, createRouteMatcher } from "@clerk/nextjs/server";

const publicRoutes = createRouteMatcher([
  "/",
  "/sign-in(.*)",
  "/sign-up(.*)",
]);

const adminRoutes = createRouteMatcher(["/admin/(.*)"]);
const teacherRoutes = createRouteMatcher(["/teacher/(.*)"]);
const studentRoutes = createRouteMatcher(["/student/(.*)"]);

export default clerkMiddleware(async (auth, req) => {
  if (publicRoutes(req)) return;

  if (adminRoutes(req)) {
    await auth.protect({ role: "org:admin" });
  }

  if (teacherRoutes(req)) {
    await auth.protect({ role: "org:teacher" });
  }

  if (studentRoutes(req)) {
    await auth.protect({ role: "org:student" });
  }
});

export const config = {
  matcher: [
    "/((?!_next|[^?]*\\.(html|css|js|jpg|jpeg|png|gif|svg|ico)$).*)",
    "/(api|trpc)(.*)",
  ],
};

📋ملخص مراجعة حماية المسارات

الوسيط (proxy.ts):

await auth.protect() - حماية المسارات الأساسية
await auth.protect({ role: "org:admin" }) - حماية قائمة على الأدوار
await auth.protect({ permission: "org:course:create" }) - حماية قائمة على الأذونات
createRouteMatcher() - مطابقة أنماط المسارات

مكونات الخادم والإجراءات:

const { userId } = await auth() - جلب معرف المستخدم
if (!userId) redirect("/sign-in") - إعادة توجيه إذا لم يكن مسجلاً
sessionClaims?.metadata?.role - جلب دور المستخدم

🎤

أسئلة الانترفيو

متوسط

الإجابة:

✨

نصائح وحيل

🧠

استخدم UserButton component

زر جاهز يعرض معلومات المستخدم وخيارات تسجيل الخروج

→

الدرس السابق

🔐 تسجيل الدخول والحسابات

الدرس التالي

🔐 إدارة المستخدم والجلسة

←

جاري التحميل...

الملفات الشخصية للمستخدمين

javascript
import { useUser } from '@clerk/nextjs';

function UserProfile() {
  const { isLoaded, isSignedIn, user } = useUser();
  
  if (!isLoaded) return <div>جاري التحميل...</div>;
  if (!isSignedIn) return null;
  
  return (
    <div>
      <p>الاسم: {user.fullName}</p>
      <p>البريد الإلكتروني: {user.primaryEmailAddress}</p>
    </div>
  );
}

// الحل المتوقع لـ proxy.ts import { clerkMiddleware, createRouteMatcher } from "@clerk/nextjs/server"; const publicRoutes = createRouteMatcher([ "/", "/sign-in(.*)", "/sign-up(.*)", ]); const adminRoutes = createRouteMatcher(["/admin/(.*)"]); const teacherRoutes = createRouteMatcher(["/teacher/(.*)"]); const studentRoutes = createRouteMatcher(["/student/(.*)"]); export default clerkMiddleware(async (auth, req) => { if (publicRoutes(req)) return; if (adminRoutes(req)) { await auth.protect({ role: "org:admin" }); } if (teacherRoutes(req)) { await auth.protect({ role: "org:teacher" }); } if (studentRoutes(req)) { await auth.protect({ role: "org:student" }); } }); export const config = { matcher: [ "/((?!_next|[^?]*\\.(html|css|js|jpg|jpeg|png|gif|svg|ico)$).*)", "/(api|trpc)(.*)", ], };