# بررسی هویت کاربر و ارسال پست

# مقدمه

هر برنامه محتوا محوری، شامل یک سری داده هست که به هر کدوم یک مدل گفته میشه. برای هر مدل، چهار عملیات ساخت(Create)، خواندن(Read)، بروز رسانی(Update) و حذف(Delete) تعریف میشه که به اختصار CRUD گفته میشه.

تا اینجای کار، فقط به خواندن مدل‌هامون (پست و کامنت) پرداختیم. تو این قسمت، می‌خوایم به ساخت یک پست بپردازیم. بدین منظور، باید به کاربران سایتمون اجازه ساخت اکانت بدیم تا هویتشون رو برای ایجاد پست جدید (یا باقی عملیات ویرایش داده‌ای) تشخیص بدیم.

# صفحه Signup

این صفحه یک فرم داره که شامل چهار فیلد زیر هست:

• Title
• Username
• Password
• Confirm password
• Email

حین تایپ کردن کاربر توی فیلد username باید بهش بفهمونیم که آیا می‌تونه از username استفاده کنه یا نه. با تایپ کردن username ریکوئست می‌زنیم به بک‌اند و اگر استفاده از اون استرینگ ممکن بود یا نبود، بهش فیدبک مناسب میدیم. برای این ریکوئست از api زیر استفاده کن:

localhost:3000/users/[username]

فیلد‌های password و confirm password باید یکسان وارد بشن: از لحظه‌ای که کاربر شروع کرد به وارد کردن confirm password تا لحظه‌ای که مقدار این فیلد با فیلد password یکی نیست، باید فیدبک مناسب بهش بدیم و وقتی که یکی بود هم، همین‌طور.

فیلد email باید valid باشه و باید فیدبک مناسب به کاربر داده‌بشه.

پس از این که همه فیلد ها وارد شدند، دکمه Signup پایین صفحه فعال میشه و در صورت کلیک شدن، ریکوئستی شامل username، password و email و title به سرور ارسال می‌شه و اگه همه‌ چی اوکی باشه، کاربر لاگین میشه و به صفحه home هدایت میشه. برای ایجاد کاربر ریکوئست Post به آدرس زیر بفرست:

localhost:3000/users

قبل از شروع پیاده سازی، مستندات سایت React در مورد فرم‌ها، کار با رخداد ها و کمپوننت‌های کنترل‌نشده رو بخون.

برای این صفحه، Route جدیدی تعریف کن که شامل header صفحات قبلی، و این فرم باشه.

# صفحه login

شامل فیلد‌های username و password هست، و در صورتی که اطلاعات وارد شده توسط سرور تایید بشن، کاربر باید لاگین بیشه و به صفحه خانه برگرده. برای بررسی درستی اطلاعات کاربر و گرفتن token، به api زیر ریکوئست post بزن و username و password رو توی یه json بفرست:

localhost:3000/sessions

# شناسایی کاربران پس از ورود یا ثبت‌نام

همون‌طور که می‌دونید، پروتکل http، توجهی به وضعیت کلاینت نداره و به اصطلاح stateless هست. بدین معنی که اگر در ریکوئست http اول، هویت کاربر تصدیق بشه، در ریکوئست دوم، اطلاعاتی از ریکوئست قبلی در دست نیست و سرور نمی‌دونه که داره با کدوم کلاینت صحبت می‌کنه. برای حل این مشکل، راه‌حل های زیادی وجود داره که از جمله اونها میشه به basic authentication، استفاده از cookie ها، استفاده از token ها، و … اشاره کرد. این لینک رو برای اطلاعات بیشتر راجع به authentication بخون. یکی از روش های رایج در Single Page Application ها، استفاده از jwt token هست که یک‌بار توسط سرور ساخته‌میشه و از اون پس هر بار کاربر اون رو به همراه بقیه محتوای requestاش به سرور ارسال می‌کنه. با این روش، سرور با هر ریکوئستی می‌تونه دوباره هویت کاربر رو بررسی کنه. برای یادگیری جزییات بیشتر این روش می‌تونی اینجا رو بخونی.

Token ایجاد شده توسط سرور، به کلاینت ارسال میشه و کلاینت اون رو داخل localStorage ذخیره می‌کنه. ریکوئست‌های بعدی شامل http-headerای هستند که به این شکل هست:

Authorization: Bearer <token>

# افزودن پست

در صفحه home، برای کاربری که لاگین کرده، قسمتی ایجاد کن که شامل یک باکس خالی برای نوشتن عنوان پست، و یک باکس بزرگ‌تر برای نوشتن متن پست داشته‌باشه.

سایر فیچر‌های این قسمت، به شکل زیر هست:

• در صورتی که ارتفاع متن نوشته‌شده توسط کاربر، از ارتفاع تعبیه شده برای این فیلد بیشتر باشه، نباید به اون فیلد اسکرول اضافه بشه، بلکه باید طول فیلد هم افزایش پیدا کنه.

• در صورتی که کاربر ctrl + enter رو می‌زنه، پست ارسال میشه به سرور (دکمه Send new post هم همین کار رو می‌کنه)

• اطلاعاتی که به سرور می‌فرستی شامل موارد زیر هست:

  • توکن jwt در هدر مربوطه.
  • هدر تعیین کننده نوع اطلاعات فرستاده شده به سرور (json)
  • اطلاعات پست (به صورت json) شامل:
    • title
    • body
    • date

• این پست به endpoint گرفتن لیست پست‌ها ریکوئست می‌زنه، منتها با متد POST.

• وقتی پست جدید ثبت شد، ریسپانس سرور شامل همه اطلاعات پست خواهد بود. این پست رو بدون گرفتن لیست دوباره پست‌ها، به صفحه اضافه کن.