nextjs jwt authentication

Next.js JWT المصادقة

دليل على تطبيق المفهوم لإظهار مصادقة تطبيق Next.js مع JWT.

يتم إجراء التطبيق على افتراض أن خادم العرض وخادم API يتم فصلهما.

ويستخدم API هذا للمصادقة.

فكرة:

التطبيقات المقدمة من جانب الخادم رائع. أنها تصنع بقعة حلوة بين تطبيقات العصر الحجري وتطبيقات الصفحة المفردة التي تعمل بالخدمات الدقيقة. لكنهم يضيفون أيضًا تعقيدًا لإنشاءهم. إن الحفاظ على الحالة على الخادم والعميل في المزامنة ، والتوجيه على العميل والخادم ، وتحميل البيانات قبل تقديم الخادم ، وما إلى ذلك ، تعد بعض الأشياء التي تجعل تطبيقاتنا أكثر تعقيدًا. هذا هو السبب في وجود أطر مثل Next.js ، لحل معظم هذه المشكلات. ومع ذلك ، يتم ترك أشياء مثل المصادقة. هذه محاولة لتنفيذ المصادقة بناءً على JWT. الشيء هو أننا لا نستطيع تخزين الرموز في LocalStorage كما سنفعل مع SPA.

تتمثل الفكرة في تلقي الرمز المميز من الخادم على العميل ، وتخزينه في ملفات تعريف الارتباط ، وبعد ذلك كلما تقدم الصفحة على الخادم ، سنكون قادرين على الوصول إلى الرمز المميز من ملف تعريف الارتباط.

كيف تعمل:

العميل:

يرسل المستخدم طلب مصادقة من العميل. في الاستجابة ، يتم استلام JWT وتخزينها في ملفات تعريف الارتباط للمتصفح ومتجر Redux. ثم يمكن للمستخدم الوصول إلى الرمز المميز من العميل ، ويمكنه استخدامه للوصول إلى الطرق المحمية.

الخادم:

عندما يقوم المستخدم بتقديم طلب صفحة ، يتم إرسال ملفات تعريف الارتباط أيضًا ، حتى يتمكن الخادم من قراءتها. لقراءته ، يستخدم المستخدم طريقة دورة حياة getInitialProps ، المقدمة بواسطة Next.js. يحصل على وسيطة - كائن السياق الذي يحتوي على بعض الخصائص. يمكنك قراءة المزيد عنها هنا. في خاصية req ، يمكننا الوصول إلى خاصية headers تحتوي على ملف تعريف الارتباط مع الرمز المميز. يتم إرسال منشئ الإجراء لحفظ الرمز المميز في متجر Redux ، ويتمكن التطبيق الآن من الوصول إلى الرمز المميز مرة أخرى.

الاستخدام:

تثبيت:

تأكد من تثبيت عقدة و NPM.

تأكد أيضًا من تشغيل خادم API.

git clone https://github.com/alan2207/nextjs-jwt-authentication
cd nextjs-jwt-authentication
npm install

بدء التطبيق:

 # Run in dev mode:
npm run dev

# Run in production:
npm run build
npm start