كيفية تسجيل خروج المستخدم تلقائيًا بعد انتهاء صلاحية JWT على Angular

تصوير مهدي موسوي على Unsplash

لذا ، فإنك تقرأ بعض الدروس التعليمية ، وربما انغمست قليلاً في التوثيق ، وبعد بعض الوقت من جودة الترميز الجيد ، أصبح لديك أول تطبيق Angular رائع مع كل ما تريده كمبتدئ: تصميم Slick ومكونات المواد والطرق المحمية باستخدام الحراس و نظام تسجيل الدخول كجزء من الواجهة الخلفية المصممة باستخدام NodeJS؟ أم كان الربيع؟

يبدو أن كل شيء يعمل ، حتى الانتظار ، انتهت صلاحية JSON Web Token ولكنك لا تزال تبحث في هذا العرض المحمي. على الأرجح ليست كبيرة ، المستخدم لا يمكنه التفاعل مع الواجهة الخلفية ، لأن الرمز المميز منتهي الصلاحية ، ولكن من المؤكد أن هذه التفاصيل يجب أن تكون مصقولة. أدخل RxJS.

إذا قمت بتشفير هذا ، فمن المحتمل أنك لمست بعض RxJS بالفعل ورأيت مجموعة من Observables حولها. إذا لم يكن الأمر كذلك حقًا ، إليك تعريف سريع من موقع المشروع على الويب:

RxJS هي مكتبة للبرمجة التفاعلية باستخدام Observables ، لتسهيل إنشاء رمز غير متزامن أو قائم على رد الاتصال.

خدمات الإنقاذ

سأفترض أن لديك منطق المصادقة في خدمة مصادقة مخصصة. وذلك لأن حالة المستخدم لا يمكن أن تعتمد على مكون واحد.

بدون مزيد من اللغط ، دعنا نلقي نظرة على بعض الرموز.

تدفق مصادقة المستخدم

في نموذج التنفيذ هذا ، لدينا تدفق مصادقة أساسي مكون من 3 خطوات ، حيث يقوم المستخدم بتسجيل الدخول (يخزن التطبيق مكان JWT) ، ويتفاعل المستخدم مع الواجهة الخلفية باستخدام طرق / طرق عرض محمية (يتم اعتراض طلبات Http ويتم إلحاق رأس التفويض لهم) وأخيرًا ، يخرج المستخدم أو تنتهي صلاحية JWT ، أيهما يأتي أولاً.

منطق تسجيل الدخول

من مكون تسجيل الدخول ، نرسل أوراق اعتماد المستخدم إلى الواجهة الخلفية. إذا كان كل شيء على ما يرام ، فإننا نتصل بعد ذلك بالطريقة storeUserData () ، التي تحفظ JWT واسم المستخدم في تخزين الجلسة ، وتحسب الوقت المتبقي لانتهاء صلاحية هذا الرمز المميز ، وأخيرًا تستدعي expirationCounter () لتولي المهمة.

منطق عداد انتهاء صلاحية JWT

دعونا الآن نتعامل مع الانتظار الفعلي للرمز إلى انتهاء الصلاحية للتفاعل. أولاً ، نريد التخلص من الاشتراكات السابقة. نحن نفعل ذلك من خلال استدعاء إلغاء الاشتراك ، ونغفر التكرار ، خاصية الاشتراك التي حددناها في الفصل.

ثم ننشئ واحدًا جديدًا ، دعنا نبدأه من خلال تمرير ملاحظة وهمية `` (فارغة) '' ، سنقوم من خلالها بتأخير مقدار الوقت المتبقي تمامًا لإنهاء JWT وأخيرًا ، عندما يحدث ذلك ، نسمي طريقة تسجيل الخروج ونوجه المستخدم إلى صفحة تسجيل الدخول.

منطق الخروج

في طريقة تسجيل الخروج ، نتأكد أولاً من إلغاء اشتراكنا من أي اشتراك مستمر ، على سبيل المثال ، قام المستخدم بتسجيل الخروج قبل انتهاء صلاحية الجلسة ، وأخيرًا نمسح خصائص الفصل وتخزين الجلسة من جميع المعلومات المتعلقة بالجلسة.

لمزيد من المعلومات ، راجع المستندات أو حتى هذا الدليل المفيد للغاية مع الأمثلة والتفسيرات والموارد لـ RxJS.

شكرا للقراءة.