جیسون وب توکن: ساخت صفحه ورود با JWT Node.js

در اینجا به تشریح یک ریپوسیتوری میپردازیم. در این ریپو یک صفحه لاگین ساخته شده است. بصورت ssr سرور ساید رندرینگ (بخاطر حفظ امنیت) یک صفحه لاگین بسازیم.

نتیجه

تمام کدها در گیتهاب جونیور فرانت اند ریپوسیتوری ejs-app وجود دارد.

ejs-app

مراحل انجام کار

وقتی روت خانه لود میشود,
سشن چک میشود تا اگر توکن داشته باشد
یک درخواست اجاکس به روت ورایفای فرستاده شود
تا صحیح بودن توکن مشخص شود
تا ایتم های منو مشخص شوند.
اینجا توکن وجود ندارد
اجاکس فرستاده نمیشود
و در منو فقط ایتم لوگین در کنار خانه قرار میگیرد.

وقتی روی منو لوگین کلیک شود
به روت لوگین در بک اند رفته و res.render میشود
در ابتدای بارگیری فرانت اند
این بار هم سشن چک میشود
و چون توکن ندارد
اجازه میدهد روت لوگین بدون ریدایرکت به داشبورد بیاید

در روت لوگین, فرم با مقادیر اشتباه یا خالی سابمیت میشود
با اجاکس درخواست به روت ساین ارسال میشود
چون اشتباه یا خالی بود, پاسخ res.json هم با همین معنا برمیگردد.
پاسخ توسط اجاکس دریافت شده و در پایین فرم نمایش داده میشود.

برای سابمیت دوم, نیازی به رفرش صفحه نیست
زیرا با وجود اجاکس روت تکان نخورده باقی مانده است
میتوان با مقادیر جدید ارسال شود

اینبار با پسورد و یوزرنیم صحیح سابمیت میشود
روت ساین هم با متد ساین, توکن را میسازد و res.json میکند
اجاکس پاسخ را دریافت میکند که حاوی یک توکن است.
این توکن را در سشن ذخیره کرده و ریدایرکت به روت داشبورد میکند

از آنجا که درخواست GET است,
توکن در url چسبیده به روت داشبورد ارسال میشود
در بک اند, روت داشبورد, توکن را ورایفای میکند
اگر صحیح باشد بجای ریدایرکت به لوگین, res.render میکند.
حالا فرانت اند سشن را در ابتدای بارگیری چک میکند,
چون توکن موجود است برای اعتبارسنجی به api/verify ارسال میکند.
پاسخ را با اجاکس GET دریافت کرده
پاسخ میگوید توکن صحیح است
فرانت اند ایتم های داشبورد و خروج را بجای ایتم لاگین ظاهر میکند.
همچنین روت داشبورد نمایان میشود
در این حالت اگر مستقیم در url روت لاگین وارد شود
فرانت اند به گونه ای تنظیم شده تا اگر با وجود توکن صحیح, روت لاگین بود فورا به داشبورد با توکن ریدایرکت شود.

اگر روی دکمه خروج کلیک شود
سشن پاک میشود و ریدایرکت فرانت اند به لاگین صورت میگیرد
روت لاگین در بک اند بدون هیچ شرطی res.render میشود
در فرانت اند مثل همیشه در اول بارگیری صفحه سشن چک میشود
سشن توکن ندارد بنابراین اجازه میدهد لاگین بدون ریدایرکت اجرا شود.