تسک پیاده‌سازی سیستم احراز هویت مبتنی بر نقش در Next.js

مقدمه

در این تسک، شما یک سیستم احراز هویت مبتنی بر نقش (Role-Based Authentication) با استفاده از Next.js و TypeScript پیاده‌سازی خواهید کرد. API های مورد نیاز برای شما فراهم شده‌اند و وظیفه شما پیاده‌سازی بخش frontend و مدیریت جریان احراز هویت است. این تسک برای ارزیابی مهارت‌های شما در زمینه React، Next.js، TypeScript و پیاده‌سازی سیستم‌های امنیتی طراحی شده است.

مشخصات تسک

نیازمندی‌های اصلی

• پیاده‌سازی سیستم احراز هویت با نقش‌های مختلف
• استفاده از TypeScript با تعریف مناسب type ها و interface ها
• محافظت از مسیرها بر اساس نقش کاربر
• حفظ وضعیت لاگین کاربر پس از رفرش صفحه
• پیاده‌سازی مناسب error handling و نمایش پیام‌های خطا به کاربر
• طراحی UI مهم نیست، تمرکز بر منطق و کد است

نیازمندی‌های عملکردی

1. کاربران بتوانند با نام کاربری و رمز عبور وارد سیستم شوند
2. پس از ورود، کاربر به داشبورد مناسب با نقش خود هدایت شود:
   • کاربران با نقش admin به مسیر /admin-dashboard
   • کاربران با نقش user به مسیر /user-dashboard
3. وضعیت لاگین کاربر پس از رفرش صفحه حفظ شود
4. کاربر بتواند از سیستم خارج شود
5. کاربران فقط به صفحات متناسب با نقش خود دسترسی داشته باشند
6. نمایش وضعیت لودینگ هنگام ارسال درخواست‌های API

نقش‌های کاربری

• Admin: دسترسی به /admin-dashboard و مشاهده لیست تمام کاربران
• User: دسترسی به /user-dashboard و مشاهده اطلاعات حساب کاربری خود

موارد اختیاری (امتیاز اضافی)

موارد زیر الزامی نیستند، اما پیاده‌سازی آنها امتیاز مثبت محسوب می‌شود:

1. تست‌نویسی:

   • نوشتن تست‌های واحد (Unit Tests) برای کامپوننت‌ها با استفاده از Jest و React Testing Library

2. طراحی UI/UX:

   • طراحی رابط کاربری جذاب و ریسپانسیو

3. بهینه‌سازی کارایی:

   • استفاده از تکنیک‌های مدرن React برای بهینه‌سازی رندر
   • کش کردن داده‌ها و درخواست‌های API

تکنولوژی‌ها

• Next.js (App Router)
• TypeScript
• JWT
• انتخاب روش مدیریت state به عهده شماست (Context API، Redux، Zustand، ...)

معیارهای ارزیابی

پروژه شما بر اساس معیارهای زیر ارزیابی خواهد شد:

1. کیفیت کد: استفاده درست از الگوهای طراحی، قابلیت خوانایی و نگهداری
2. استفاده از TypeScript: تعریف درست تایپ‌ها و استفاده مناسب از TypeScript
3. مدیریت state: انتخاب و پیاده‌سازی مناسب مدیریت وضعیت برنامه
4. امنیت: پیاده‌سازی صحیح مکانیزم‌های احراز هویت و محافظت از مسیرها
5. مدیریت خطا: نحوه برخورد با خطاها و نمایش پیام‌های مناسب به کاربر
6. ساختار پروژه: سازماندهی مناسب کدها و فولدرها

API ها

API های زیر برای شما آماده شده‌اند:

• POST /api/auth/login: ورود به سیستم
• POST /api/auth/logout: خروج از سیستم
• GET /api/auth/me: دریافت اطلاعات کاربر فعلی
• GET /api/admin/users: دریافت لیست کاربران (فقط برای admin)

کاربران نمونه

نام کاربری	رمز عبور	نقش
admin	admin123	admin
user	user123	user

نکات تکمیلی

• برای پیاده‌سازی middleware و محافظت از مسیرها آزاد هستید
• UI و طراحی ظاهری در اولویت‌های اصلی نیستند، اما یک رابط کاربری تمیز و کاربرپسند امتیاز مثبت محسوب می‌شود

انتظارات تحویل

برای تحویل پروژه، موارد زیر مورد انتظار است:

1. کد کامل پروژه در یک مخزن گیت
2. یک فایل README با توضیحات نحوه راه‌اندازی و استفاده از پروژه
3. توضیح مختصری از معماری پروژه و تصمیمات فنی که گرفته‌اید
4. در صورت پیاده‌سازی موارد اختیاری، آنها را در README ذکر کنید

راهنمای راه‌اندازی پروژه

پیش‌نیازها

برای انجام این تسک، به موارد زیر نیاز دارید:

1. Node.js (نسخه 16 یا بالاتر)
2. npm یا pnpm یا yarn

مراحل راه‌اندازی

1. ایجاد پروژه Next.js با TypeScript:

npx create-next-app@latest my-auth-project --typescript

2. نصب وابستگی‌های مورد نیاز:

npm install jsonwebtoken
npm install -D @types/jsonwebtoken

3. کپی کدهای API: فایل‌ها را در پروژه خود کپی کنید (کدها در همین ریپو وجود دارند)

پشتیبانی و سوالات

در صورت بروز هرگونه ابهام یا سوال درباره این تسک، می‌توانید از طریق ایمیل با ما در ارتباط باشید.

موفق باشید!