جاري التحميل...
جاري التحميل...
تطبيق إدارة مهام كامل مع مصادقة وأدوار
تهانينا على إكمال مرحلة Clerk! لقد أتقنت المصادقة المتقدمة وإدارة المستخدمين.
في هذا المشروع، سنبني تطبيقاً كاملاً لإدارة المهام باستخدام جميع مفاهيم Clerk التي تعلمناها.
بعد إكمال جميع المراحل — TypeScript و Tailwind CSS و HTML و Next.js و Supabase و Clerk — لديك مجموعة أدوات كاملة لبناء تطبيقات الويب الحديثة. ابدأ مشروعك النهائي!
ما هي الطريقة الموصى بها لحماية المسارات في Clerk؟
لماذا تستخدم المنظمات في Clerk؟
كيف تتعامل مع حالات التحميل مع Clerk؟
أنشئ تطبيق إدارة مهام كاملاً مع مصادقة متعددة المزودين وMFA ومنظمات وأدوار ومسارات محمية.
الحل:
// task-manager - مشروع إدارة المهام الكامل
// هيكل المشروع:
task-manager/
├── app/
│ ├── layout.js # ClerkProvider
│ ├── page.js # الصفحة الرئيسية (عامة)
│ ├── sign-in/[[...sign-in]]/page.js
│ ├── sign-up/[[...sign-up]]/page.js
│ ├── dashboard/
│ │ ├── layout.js # محمية
│ │ ├── page.js # لوحة التحكم
│ │ └── tasks/
│ │ ├── page.js # جميع المهام
│ │ ├── new/page.js # مهمة جديدة
│ │ └── [taskId]/page.js # تعديل مهمة
│ ├── profile/page.js # الملف الشخصي
│ ├── admin/ # للمديرين فقط
│ │ ├── layout.js
│ │ └── page.js
│ └── api/tasks/route.js # API
├── components/
│ ├── Header.js
│ ├── TaskCard.js
│ ├── TaskForm.js
│ └── RoleBadge.js
├── lib/prisma.js
├── prisma/schema.prisma
├── proxy.ts
└── .env.localالمكونات الأساسية:
{" - لف التطبيق لسياق Clerk{" / {" - مكونات واجهة المصادقة{" - زر الملف الشخصي{" - إدارة الملف الشخصي الكاملة{" - العرض الشرطيالخطافات والدوال:
useUser() - الوصول لبيانات المستخدم (عميل)useAuth() - الوصول لحالة المصادقة (عميل)useSession() - معلومات الجلسة الحاليةauth() - فحص المصادقة من الخادمcurrentUser() - جلب كائن المستخدم الكامل (خادم)clerkMiddleware() - حماية المسارات عالمياًالإجابة:
استخدم Clerk Webhooks
لمزامنة بيانات المستخدم مع قاعدة البيانات