آموزش احراز هویت با JWT (جیسون وب توکن) Express-Nuxt-Mongo
دیدین تا حالا مثال هایی که بعضی از معلم ها سرِ کلاس حل می‌کنند، با سوالاتی که سرِ امتحان واسمون طرح می‌کنند، چقدر تفاوت داره :)
تا الان بیشتر دوره های آموزشی که داخل سایتم منتشر کردم، شبیه مثال های سرِ کلاس بوده...
یادگرفتنش مفیده اما برای ورود به بازار کار، هنوز یه سری نکاتی کم دارن... همون نکاتی که بهشون می‌گن فوت استادی...
آموزش های پروژه محور، هم زمان زیادی می‌برن و هم برای کسی که درس می‌ده، چالش های زیادی داره... مثلا فرض کنید فیلم یک جلسه رو ضبط کردیم و بعد از خداحافظی، یادمون می‌یاد یک موضوع مهم رو نگفتیم :)
باز باید کلی فیلم رو ویرایش کنیم تا اون تیکه، جاساز بشه :)
یا مثلا جایی که من دارم ضبط می‌کنم، گاهی وقات موتوری ها رفت و آمد دارند، بعد من از دور که صداشون رو می‌شنوم می‌زنم Stop ... بعدش که طرف می‌یاد و می‌ره، یادم رفته چی می‌خواستم بگم :))))) خیلی باحاله...
اما با این همه داستان هایی که هست، باز هم می‌ارزه و حس خوبی دارم از اینکه نکات برنامه نویسی رو دارم به بقیه آموزش می‌دم. یک نفر هم که اینارو یاد بگیره و انشالله یک منبع درامد حلالی رو برای خودش رقم بزنه، خدارو بی نهایت شکر می‌کنم.
چیزی که در نهایت تصمیم گرفتم، آموزش یک پروژه ی فول استکی بود تا بتونم خیلی از موارد برنامه نویسی رو پوشش بدم.توی این دوره، ما هم سمت فرانت اند رو پوشش میدیم و هم سمت بک اند... پروژه ای که قراره با یک توکن، کاربر رو تشخیص بده و اون رو احراز هویت کنه.
یعنی از همون ابتدا، 2 تا پروژه ایجاد می‌کنیم.یک پوشه به نام back و یک پوشه به نام front ... و کدهای هر بخش رو در پوشه ی مربوط به خودش قرار میدیم.
یه چیز خیلی باحال هم اینکه در انتهای کار، سورس کد رو در اختیارتون قرار می‌دم تا تمام دوستانی که دوره را تهیه می‌کنند، بتونن کدهای برنامه رو تغییر داده و خودشون دست به کد بشن.
الان هم تا جلسه ی 15 ام از این آموزش، تولید شده و در سایت قرار داده شده است.
دموی پروژه رو هم از این لینک می‌تونید مشاهده بفرمایید.
آموزش احراز هویت با JWT (جیسون وب توکن) Express - Nuxt - Mongo
ویژگیهای برنامه در سمت backend:
- استفاده از NodeJS به عنوان موتور اجرای کدهای جاوا اسکریپت در سمت سرور
- استفاده از کتابخانه ExpressJS برای طراحی API
- پیاده سازی انواع route های GET , POST , PUT
- استفاده از Middleware برای تایید توکن (verify)
- ایجاد route لاگین جهت ایجاد توکن (sign)
- ایجاد route لاگین جهت حذف توکن (logout)
- استفاده از mongoose برای ساخت دیتابیس
- انجام عملیات CRUD
- ایجاد Schema برای جدول user
- ایندکس گذاری فیلد accountID ، جهت عدم ثبت داده تکراری
- استفاده از body-parser جهت دریافت پارامترها از سمت کاربر
- آشنایی با ارسال و دریافت توکن به صورت GET , POST , authorization header
ویژگیهای برنامه در سمت frontend:
- استفاده از NUXT 3 به جهت بهینه سازی برنامه برای موتورهای جستجو (بچه ها کدهای ویو جی اس در سمت کلاینت اجرا می‌شن و این برای موتورهای جستجو ایده آل نیست. برای همین ما از ناکست، استفاده کردیم تا کدهامون سمت سرور ران بشن و در نتیجه بتونید مانور خوبی روی سئو داشته باشید)
- استفاده از Option API به جهت آشنایی با VueJS 2
- مهاجرت به Composition API به جهت آشنایی با VueJS 3
- نصب و استفاده از فریم ورک تیلویند (tailwindcss) (این فریم ورک، خودش یک دوره ی جداگانه داره اما توی این دوره هم تا حدی توضیح دادیم در مورد تیلویند و با بررسی کدهای برنامه، می‌تونید بفهمید داستانش چیه)
- ایجاد یک قالب ریسپانسیو برای سایت
- نحوه تعریف کلاس های کاستوم در tailwindcss
- پوشه بندی برنامه و انتقال پوشه های کلیدی در زیرمجموعه src
- استفاده از Composables
- استفاده از Pages
- استفاده از Components
- استفاده از Plugins
- استفاده Layouts
- استفاده از mixins
- ذخیره و بازیابی توکن در LocalStorage
- استفاده از env. برای مقدار دهی به متغیرهای runtime
- نمایش کامپوننت ها در مودال (بسیار کاربردی)
- استفاده از فونت زیبای وزیر
برای دیتابیس هم همونطور که گفتم از دیتابیس فوق العاده پرقدرت MongoDB استفاده می‌کنم.
البته آموزش مونگو یک خیلی مفصل تر از این حرفهاست و من در این پروژه فقط در حد نیاز توضیحاتی رو خدمتتون ارائه دادم.
برای آشنایی بیشتر با این دیتابیس، می‌تونید از این 2 دوره بهره بگیرید:
همچنین توی این دوره، از ادیتور VSCode استفاده کردیم که یک دوره ی رایگان vscode هم گذاشتیم که از بعد از ثبت نام، می‌تونید دانلود کنید.
لینک سایر دوره ها رو هم چه در حوزه فرانت و چه در بخش بک، اینجا آوردم:
