الآن، بعد أن أكملنا تحديث جانب الخادم.
حان الوقت للانتقال إلى العميل رد الفعل.
لراحتك، لقد قدمت لك مستودع GitHub،
الذي يحتوي على الإصدار النهائي من العميل القادر على التواصل مع
خادم REST API الخاص بنا ثم عرض وجهات النظر المختلفة لعميلنا.
لذلك، لقد اتخذت إعادة التطبيق التي طورناها
في الدورة الثانية من التخصص ثم تعديله.
ونحن سوف تأخذ جولة قصيرة من خلال رمز في وقت لاحق قليلا.
الآن، ستقوم باستنساخ مستودع Git إلى جهاز الكمبيوتر الخاص بك،
ثم بدء تشغيل العميل الخاص بك ومن ثم رؤيته يتواصل مع مجموعة الخادم الخاصة بنا.
دعونا نرى التفاصيل التالية.
للبدء في هذا التمرين،
في المحطة الطرفية أو نافذة الأوامر،
انتقل إلى موقعك المناسب ثم في الموجه اكتب git clone
https://github.com/jmuppala/conFusion-React.git، ثم دع
تطبيق React يتم استنساخه إلى جهاز الكمبيوتر الخاص بك.
بمجرد اكتمال الاستنساخ،
انتقل إلى مجلد Confusion-React
الذي تم إنشاؤه للتو عند استنساخ مستودع Git هذا.
ثم، ستلاحظ على الفور أن هناك مجموعة من الملفات بالفعل هناك.
الآن، في موجه، اكتب تثبيت الغزل،
من أجل تثبيت كافة وحدات العقدة
التي يعتمد عليها تطبيق React هذا.
لذلك، مرة واحدة يتم تثبيت جميع وحدات العقدة،
ثم يمكننا البدء في بداية الغزل لدينا لتجميع وخدمة تطبيق React لدينا.
مرة واحدة في كل شيء،
تأكد من أن خادم MongoDB الخاص بك هو
قيد التشغيل وتشغيل وأيضا خادم REST API الخاص بك هو أيضا قيد التشغيل.
خلاف ذلك، لن يعمل العميل.
لذلك، الآن بعد أن قمت بتثبيت العميل الخاص بك على جهاز الكمبيوتر الخاص بك،
إضافة نوع موجه بدء الغزل
وسيتم إعادة ترجمة التطبيق الخاص بك وتقديمه في فترة قصيرة.
بمجرد تجميع التطبيق الخاص بك بنجاح،
انتقل إلى المتصفح وسترى أن
تطبيق React الخاص بك يبدأ ويظهر على الشاشة هنا.
ستلاحظ على الفور أن التطبيق الخاص بك
قادر على جلب البيانات من الخادم ومن ثم تقديم
الأجزاء المختلفة من التطبيق الخاص بك تماما مثل ما
قمت به في نهاية دورة React الخاصة بك.
عند الانتقال إلى المجلد حول،
سترى أيضًا أن الصفحة حول تعرض المعلومات أيضًا.
على هذا النحو في وقت سابق في القائمة،
ترى العناصر في القائمة التي يتم عرضها تماما كما رأينا مع التطبيق.
الآن، بالإضافة إلى ذلك، أضفت في
صفحة واحدة أخرى إلى تطبيق صفحة واحدة يسمى المفضلة،
والتي لا يمكنك الانتقال إليها،
لأنه لم يتم تسجيل أي مستخدم في نظامه.
لذلك، ترى أنه ليس لدي أي مستخدم تسجيل الدخول إلى النظام.
لذلك، هذا هو السبب في عدم وجود نقطة في الإشارة إلى المفضلة لديك لأنك لا تعرف
أي مستخدم كمفضلة يجب أن تظهر هنا وصفحة الاتصال كالمعتاد.
الآن، دعونا تسجيل الدخول.
لتسجيل الدخول إلى طلبنا،
سنضغط على زر تسجيل الدخول ثم سترى أن مربع حوار تسجيل الدخول للملوثات العضوية الثابتة.
ثم اسمحوا لي أن تسجيل الدخول كواحد من المستخدمين المسجلين،
والتي قمنا بتسجيلها كجزء من هذه الدورة في وقت سابق.
لذلك، بمجرد تسجيل الدخول،
ستلاحظ على الفور أنه إلى الزاوية اليمنى،
سترى زر تسجيل الدخول قد تحول الآن إلى
تسجيل الخروج ويشار إلى اسم المستخدم هنا.
لذا، من قام بتسجيل الدخول هو مذكور هنا
يمكنك أيضا من حيث المبدأ استبدال هذا مع صورة المستخدم.
الآن، لذلك تحتاج إلى إجراء المزيد من التعديلات
على كل من العميل والخادم من أجل دعم عرض الصورة هنا.
ولكن في هذه اللحظة، أنا فقط تظهر لك،
كيف يمكننا بسهولة عرض معلومات المستخدم هنا.
لذلك، يتطلب هذا تعديلًا طفيفًا على رأس المكون،
حيث سأكون قادرًا على استرداد اسم المستخدم.
لذلك، بمجرد تسجيل دخول المستخدم،
ثم إذا قمت الآن بالنقر فوق المفضلة لديك
ستلاحظ أنه لا يوجد شيء في المفضلة للمستخدم.
من الواضح أن المستخدم لم يختار بعد أي المفضلة.
لذلك، دعونا نذهب الآن إلى القائمة.
ثم، في القائمة،
اسمحوا لي اختيار عنصر واحد وبعد ذلك سوف نضيف هذا الطبق إلى المفضلة لدينا.
لذلك، النزول أدناه هنا،
سترى رمز القلب هناك،
انقر على ذلك، وسترى أن هذا سيضاف إلى المفضلة.
ويشار إلى حقيقة أن هذا قد أضيف إلى المفضلة، من خلال التغيير في الرمز هنا من قلب شاغر إلى قلب مملوء.
الآن، إذا ذهبت إلى أي طبق آخر،
ستلاحظ أن هذا له قلب شاغر
مما يعني أن هذا ليس بعد من بين المفضلة لدينا.
لذلك، اسمحوا لي أن أضيف في عنصر واحد آخر إلى
المفضلة ومن ثم دعونا إضافة عنصر ثالث إلى المفضلة أيضا.
لذلك، الآن، سترى أنه إذا ذهبت الآن إلى المفضلة،
سترى مجموعة من المفضلة التي يتم عرضها هنا.
لذلك، رأيت أنني فقط أضفت هذه الأطباق الثلاثة
إلى المفضلة لدي وهكذا يتم عرض هذه هنا.
لذلك، يتم تتبع
هذا باستخدام نقطة النهاية المفضلة
على جانب الخادم أيهما يتم تنفيذها كجزء من المهمة الأخيرة.
لذلك، إذا كنت قد فعلت هذا الواجب بشكل صحيح،
ثم هذا الجزء يجب أن يعمل كما هو متوقع.
الآن، يمكننا أيضا تعديل المفضلة.
لذلك، اسمحوا لي أن المضي قدما وحذف أحد العناصر من المفضلة.
لذلك، عندما أنقر على هذا الزر ستلاحظ على الفور
أنه، يتم حذف هذا العنصر من المفضلة ويختفي على الفور
ويتم تحديث المفضلة الخاصة بي وترى القيمة الناتجة التي يتم عرضها هنا.
لذلك، لاحظ أنه سيتم عرض المفضلة فقط
للمستخدمين الذين قاموا بتسجيل الدخول إلى النظام.
لذلك، تلاحظ على الفور مجموعة من التغييرات التي تم
إجراؤها على العميل من أجل دعم
بعض هذه الميزات الإضافية التي تراها هنا.
رأيت أيضًا ميزة تسجيل الدخول والخروج التي يتم دعمها هنا.
لذلك، عند النقر على زر الخروج،
لاحظت على الفور أن المستخدم يحصل على تسجيل الخروج
ويختفي اسم المستخدم من هناك
وبالتالي يتم تحويل الزر أيضا إلى زر تسجيل الدخول.
الآن، لذلك، مع هذا تلاحظ كيف تم
تحديث عميلي للاستفادة من خادم REST API الجديد، من
أجل دعم المفضلة التي يتم حفظها على جانب الخادم
ومن ثم تنعكس تلقائيا في تطبيق My Client كما هو موضح هنا.
الآن، بعد أن رأيت تطبيق React المعدل في العمل،
فقد حان الوقت لزيارة شفرة المصدر لمعرفة كيف
يتم تنفيذها بالضبط وما هي التغييرات
التي أجريناها المقابلة لتطبيق Redux في نهاية دورة Redux.
الآن، اثنين من التغييرات الرئيسية التي
ستلاحظها، هو دعم المفضلة وأيضا دعم المصادقة،
تسجيل دخول المستخدم ودعم الخروج.
الآن، كيف يتم تنفيذ هذه؟
سنبدأ رحلتنا في جزء Redux من طلبنا.
لذلك، الذهاب إلى جزء Redux،
دعونا زيارة أنواع الإجراءات.
في أنواع الإجراءات، سترى الآن أن لدينا
ثلاثة أنواع جديدة من الإجراءات المتعلقة المفضلة لديهم.
لذلك، سترى المفضلة تحميل،
المفضلة فشلت، وإضافة المفضلة،
والتي كما كنت تتوقع أن تكون هناك.
ثم، أيضا ستة أنواع مختلفة من الإجراءات المتعلقة بتسجيل الدخول وعملية الخروج الخاصة بهم.
الآن، حتى تتمكن من رؤية طلب تسجيل الدخول، نجاح
تسجيل الدخول، فشل تسجيل الدخول، طلب الخروج،
نجاح الخروج والفشل.
لذلك، سنرى كيف يتم استخدام أنواع الإجراءات هذه في الواقع في عملنا خلق.
لذلك، والخوض في المبدعين العمل،
لذلك هذا هو المكان الذي سترى فيه دعم المفضلة هنا.
لذلك، سوف ندرس أولا دعم المفضلة وبعد ذلك سوف
ندرس دعم دعم المصادقة.
لذلك، هنا، سترى أن لدينا أساليب جديدة أسفل
هنا تسمى باسم FavoritesLoading، FavoritesFailed، و addFavorites.
الآن، من تجاربك السابقة
DaysLoading والأطباق Failed و addDuses وهلم جرا.
لذلك، هذه الأشياء مألوفة جدا بالنسبة لك،
بحيث انها بالضبط نفس النوع من الإعداد للرمز هنا.
بالإضافة إلى ذلك، سترى طريقة أخرى هنا تسمى FetchFavorites،
والتي هي مرة أخرى كما قلت خزان Redux
، والتي يتم تنفيذها هنا،
حيث سنستخدم الجلب للوصول إلى الخادم لجلب المفضلة.
لذا، هذه هي الطرق التي سترى هنا وبعد ذلك أيضًا سترى
DeleteFavorite هنا وأيضا خزان Redux لـ PostFavorite هنا.
لذا، في PostFavorite كما
تتوقع، ستقوم بنشر المفضلة للخادم هنا.
لذلك، لاحظ هنا كيف نستخدم التفويض.
يجري إعدادها في عنوان التفويض لدينا لذلك،
وهذا شيء أود أن ألفت انتباهكم إليه في هذه اللحظة،
سنعود إلى هذا مرة أخرى عندما ننظر إلى مصادقة المستخدم والتخويل.
لذلك، نقوم بإعداد رأس التفويض مثل هذا باستخدام الجلب هنا.
لذلك، لجلب، ونحن نشر عنصر في جلب
هنا وبعد ذلك سوف تلاحظ أن هيكل كيفية جلب يتم إعطاء هنا.
الآن كلما قمت بنشر المفضلة أو حذف المفضلة أو جلب المفضلة لديك،
سيكون لدينا دائما الخادم عاد لك،
ومجموعة كاملة من المفضلة وبعد ذلك سنقوم ببساطة إضافة هذه المفضلة
في متجر ريدوكسنا هنا حتى هذا ما نقوم به هنا.
مرة أخرى، يجب أن تبدو بنية الشفرة مألوفة جدًا لك،
إذا نظرت ببساطة إلى كيفية
تنفيذ مفضلة المشاركة، ومفضلة الحذف، وجلب المفضلة.
لذلك، كل هذه سوف تتعامل مع مسألة المفضلة.
الآن، كيف بالضبط يتم تنفيذ المفضلة نفسها؟
لذلك، يتم تنفيذ وظيفة المخفض في هيكل المفضلة هنا.
لذلك، داخل هذه الوظيفة المخفضة،
سترى كيف نتعامل مع إضافة
المفضلة، تحميل المفضلة، والفشل المفضل هنا.
مرة أخرى، يجب أن تبدو الشفرة مألوفة جدًا لك استنادًا إلى
تجربتك مع وظائف المخفض التي رأيتها من أجل redux من قبل.
لذلك، مرة أخرى دفع قليلا من الاهتمام إلى الطريقة التي يتم بها تنفيذ التعليمات البرمجية.
هذا واضح إلى حد ما لذلك أنا لا تنفق
الكثير من الوقت في شرح كيفية تنفيذ هذه الأشياء.
الآن، والاستفادة من هذه،
لدينا في المكونات لدينا الآن
عنصر المفضلة الجديدة التي تتمثل مهمتها في تقديم جميع قائمة المفضلة لدينا.
لذا، هنا ترى أن المكون المفضل نفسه،
فإن هيكل المكون المفضل يشبه إلى حد كبير
بنية مكون القائمة حتى هنا لدينا
المكون المفضل الذي يتم تنفيذه كمكون وظيفي
وهناك نقوم بتقديم المفضلة في هنا كما ترى في التعليمات البرمجية هنا.
مرة أخرى، واضحة جدا أعتقد أنه يجب أن تكون قادرا على
فهم بسهولة كيف يتم
تنفيذ عنصر المفضلة بعد أن كان لديه خبرة مع كيفية تنفيذ مكون القائمة هناك.
لذلك، مرة أخرى أنا لا تنفق الكثير من الوقت في شرح التعليمات البرمجية هنا.
الآن تحليل من خلال التعليمات البرمجية هو أيضا
تجربة جيدة بالنسبة لك لمعرفة كيفية تنفيذ التعليمات البرمجية لذلك
معالجة هذا الرمز في رأسك سوف تساعدك على فهم مرة أخرى
لتوحيد فهمك للرد بمزيد من التفصيل.
لذا، سأترك هذا كتمرين لك
الآن أشير إلى أين تم
إجراء التغييرات لتنفيذ الدعم للمفضلة.
الآن المصطلح
المفضل، والمفضلة هي أيضا النفوذ في
عنصر تفاصيل الطبق وداخل مكون تفاصيل الطبق،
سترى أن لدينا إضافية- هنا،
في المكون الوظيفي للطبق
التقديم، سنقوم بتقديم الزر
الذي يدعم الاختيار أو عندما يمكنك النقر على مخطط القلب،
فإنه سيتم إضافة هذا البند معين في قائمة المفضلة لديك.
لذلك، يتم دعم كل هذا هنا باستخدام هذا الزر هنا الذي
يستدعي كما ترى هذه الوظيفة تسمى وظيفة المفضلة التي هي redux.
شكرا لأننا قد نفذت هناك وهذا الدعم لهذا
يتم تنفيذه في المكونات الرئيسية لذلك عندما تذهب إلى المكون الرئيسي،
سترى كيف يتم تنفيذ وظيفة المفضلة هنا،
وسوف نرى أيضا أن هذا يتم
تضمينها في الخريطة المرسلة إلى الدعائم وبالتالي فإن وظيفة المفضلة تنفيذها.
لذا، ترى أن الهيكلة
تشبه إلى حد كبير ما رأيته للرمز الآخر هناك.
لذلك، أنا لن تنفق الكثير من الوقت على كيفية تنفيذ دعم المفضلة،
بدلا من ذلك اسمحوا لي قضاء المزيد من الوقت على كيفية
دعم تفويض المستخدم والمصادقة في التعليمات البرمجية هنا.
الآن لمصادقة المستخدم،
ما نقوم به هنا هو أنه عندما تذهب إلى مخزن التكوين هنا،
سترى أن لدي وظيفة المخفض واحدة أخرى تسمى المصادقة التي يتم تنفيذها هنا.
لذلك، هذا سوف تتبع جزء التفويض منه.
الآن كيف يتم تنفيذ هذا؟
مرة أخرى، الخوض في العمل المبدعين،
وأنواع التقاعس رأينا بالفعل مجموعة من الإجراءات المتعلقة بتسجيل الدخول والخروج.
لذا، عند الدخول إلى منشئي المحتوى،
سترى أن لدينا هنا
جميع الوظائف التي يتم تنفيذها لتسجيل الدخول وتسجيل الخروج.
لذا، سترى وظيفة جديدة تسمى طلب تسجيل الدخول، وتلقي التسجيل،
وهكذا تكون هذه عندما يكون تسجيل الدخول ناجحًا وما إلى ذلك، ولكن على وجه الخصوص،
هذه الوظيفة الخاصة هنا لمستخدم تسجيل الدخول هي المكان الذي نبدأ فيه بعملية تسجيل الدخول.
لذلك، سنقوم بإرسال طلب تسجيل الدخول عند نقطة عندما يحاول المستخدم تسجيل الدخول،
وبعد ذلك سنقوم بجلب إلى المستخدمين شرطة مائلة نقطة نهاية تسجيل الدخول مع
المشاركة وهذا يحتوي في نص الرسالة بيانات اعتماد المستخدم هنا.
لذلك، بمجرد القيام بالجلب،
إذا تم إرجاع الاستجابة بشكل صحيح،
فيجب أن تحتوي الاستجابة على الرمز المميز هناك.
لذلك، سنقوم بمعالجة هذه الاستجابة هنا ثم إذا كان تسجيل الدخول ناجحًا،
فسنقوم بتخزين الرمز المميز في التخزين المحلي هنا.
لذلك، يمكنك أن ترى أننا نقول
لوكالستوراج تعيين رمز استجابة الرمز المميز ثم سنقوم
أيضا بتخزين بيانات اعتماد المستخدم في التخزين المحلي هنا.
لذا، سيساعدني هذان على تتبع عملية تسجيل الدخول للمستخدم.
بعد ذلك، سنقوم بعد ذلك بإرسال تسجيل الدخول لتلقي.
الآن عند هذه النقطة عندما يتم تسجيل دخول المستخدم بنجاح،
سنقوم أيضا جلب المفضلة للمستخدم.
الآن تذكر أنه يمكنك فقط جلب المفضلة للمستخدم الذي تم تسجيل الدخول.
عندما لا يتم تسجيل دخول أي مستخدم، لا توجد المفضلة ليتم جلبها،
ولكن عندما يقوم المستخدم بتسجيل الدخول بنجاح تريد جلب
المفضلة للمستخدم حتى يتمكن من عرض ذلك في تطبيق رد الفعل الخاص بك.
لذا، هذا هو السبب في أنني أقوم أيضًا بجلب المفضلة
هنا ومن ثم سنتلقى تسجيل الدخول هنا.
ثم إذا كان هناك خطأ سنقوم بإرسال خطأ تسجيل الدخول هنا.
لذلك، كل هذه الوظائف تلقي تسجيل الدخول وتسجيل الدخول الخطأ
ثم استدعاء وظائف المخفض المناسبة التي يتم تنفيذها في ملف Auth.Js.
حتى الذهاب إلى ملف Auth.Js،
الدولة هنا يتتبع حالة تسجيل الدخول للمستخدم هنا.
لذلك, هنا سوف نقوم أيضا تخزين في الدولة,
الدولة ينطوي على الشرق تحميل منطقية الذي
يتتبع ما إذا كنت في عملية تسجيل الدخول. سهولة المصادقة -
سوف تشير إلى ما إذا كان المستخدم قد تمت مصادقته وبالتالي يتم تسجيل دخول المستخدم،
لذلك عليك أن تكون قادرة على السماح للمستخدم.
لذلك، يتم استخدام هذه العلامة في العديد من الظروف
لعرض حالة تسجيل الدخول للمستخدم ومن ثم أيضا
خاصية المستخدم للدولة تتبع بيانات اعتماد المستخدم.
لذلك، هذا هو المكان الذي سوف نحصل على اسم المستخدم للعرض في مكون رأس لدينا.
الآن، هنا سترى طلب تسجيل الدخول وعندما يتم تشغيل نجاح تسجيل الدخول،
ثم ستقوم بتخزين قيمة الرمز المميز هنا ثم فشل تسجيل الدخول.
طلب الخروج، تسجيل الخروج بنجاح،
يتم التعامل مع كل هذه الأجزاء المختلفة داخل هذا المخفض auth.js المخفض هنا.
لذلك، هذه هي الطريقة التي يتم بها التعامل مع مصادقة المستخدم هنا.
الآن، في مكون الرأس،
والذهاب إلى مكون الرأس،
لذلك هذا هو المكان الذي لدينا وظيفة تسجيل الدخول هنا.
لذا، فإن HandleLogin، تتذكر أننا قمنا
بالفعل بتنفيذ هذا في مسار التفاعل.
في HandleLogin، سيبدلون المشروط.
لذلك، سنقوم بإغلاق مشروط ومن ثم سنقوم بتسجيل الدخول للمستخدم في هذه المرحلة.
لذلك، سوف نقول هذا.props LoginUser وبعد ذلك سترى أن بيانات الاعتماد
واسم المستخدم وكلمة المرور يتم تمريرها كمعلمات إلى
LoginUser وحتى يحصل في فونك LoginUser،
الذي يعتني بعد ذلك بتسجيل الدخول إلى المستخدم.
الآن، كيف يمكنك عرض حالة تسجيل الدخول للمستخدم.
لذلك، هذا بسيط جدا مرة أخرى.
في شريط التنقل هنا،
سترى أنني أضفت في عنصر جديد هنا.
لذلك، هذا هو المكان الذي سنقول هذا.props.Auth.IsAuthenticated.
لذلك، يتم استخدام العلم ISAuthenticated هنا من قبلي وحتى إذا تم تعيين هذا إلى true،
ثم سأعرض
زر الخروج هنا وهكذا هذا هو الشيء الذي سأعرضه هنا.
خلاف ذلك، سأعرض زر تسجيل الدخول.
لذا، باستخدام هذه العلامة IsAuthenticated،
أقوم بالتقليب الذي سيتم عرضه في
الرأس هناك سواء قمت بعرض زر الخروج أو زر تسجيل الدخول.
لذا، هذه هي النقطة التي نعرضها هنا.
لذلك، تسجيل الدخول أو الخروج هنا.
لذا، هذه هي الطريقة التي نتعامل بها مع عملية تسجيل الدخول
والخروج هنا، وكذلك سنقوم بعرض اسم المستخدم هناك.
لذلك، عند عرض زر الخروج،
سترى أيضا أننا نعرض اسم المستخدم في هناك.
لذا، أسفل هنا،
سنقوم أيضًا بعرض الزر HandleLogout
ثم لدينا زر الخروج الذي يتم عرضه هنا.
بالإضافة إلى ذلك، هذا البيان الخاص هنا،
هذه هي الطريقة التي نعرض بها اسم المستخدم هنا.
لذلك، يستخدم هذا هذا.props.auth.user.user.user.user.
لذلك، تحتوي خاصية المستخدم في حالة المصادقة
على بيانات اعتماد المستخدم ومن هناك أحضرت اسم المستخدم ثم
أستخدم ذلك لعرض هذا في شريط الرأس.
لذلك هذه هي الطريقة التي يتم بها
تحديث مكون الرأس من أجل التعامل مع عملية تسجيل الدخول والخروج.
مرة أخرى، طرق مباشرة إلى حد ما للتنفيذ،
إنها طريقة بسيطة إلى حد ما قمت بتطبيقها هنا.
الآن من الواضح، إذا كنت تريد طريقة أكثر تعقيدا للتعامل مع عملية تسجيل الدخول والخروج،
وبالتأكيد يمكنك الذهاب إلى طريقة كاملة للقيام بالأشياء،
ولكن هذا يكفي لتلبية متطلبات طلبي.
لذلك، لقد نفذت عملية تسجيل الدخول والخروج
بطريقة بسيطة جدا هنا باستخدام مساعدة من مخزن Redux.
لذا، من خلال مخزن Redux نفسه يتتبع
حالة تسجيل الدخول الخاصة بي سواء قمت بتسجيل الدخول وتم مصادقتها وما إذا كنت قد قمت بتسجيل الخروج.
لذلك، إذا تم تسجيل خروج المستخدم،
ثم لا يتم عرض المفضلة هنا.
الآن، إحدى النقاط المهمة التي ستسألونها هي،
كيف نضمن أننا لا ندخل إلى الدولة المفضلة هنا؟
لذا، يتم التعامل مع هذا في المكان الذي نتعامل فيه مع الطرق هنا.
لذلك، ستلاحظ أنه بالنسبة للمفضلة هنا،
فإننا نعلن عن نقطة النهاية المفضلة بدلاً من
استدعاء هذا كمسار نسميه كمسار خاص.
لذا، يسمح لك المسار الخاص بالتأكد من أنه سيتم
السماح لك بالذهاب إلى هذا الجزء فقط
في ظل الظروف، حيث يتم تسجيل دخول المستخدم.
لذلك، سيؤدي ذلك إلى منع التنقل إلى نقطة النهاية الخاصة بهم/المفضلة إذا لم يتم تسجيل دخول أي مستخدم.
الآن، كيف يتم تنفيذ هذا الطريق الخاص؟
يتم تنفيذ هذا الطريق الخاص الحق هنا.
لذلك، يمكنك أن ترى أن هذا الطريق الخاص يتم تنفيذه كما هو موضح هنا.
لذلك، هذا ليس سوى مسار هنا وبعد ذلك هنا،
سنقوم بتنفيذ هذا.props.auth.isAuthenticated.
لذا، إذا تمت مصادقة المستخدم،
فسأسمح بالانتقال
إلى المكون الذي هو المكون المفضل.
خلاف ذلك، سأقوم ببساطة بإعادة التوجيه إلى المكون الرئيسي.
لذا، إذا لم يتم تسجيل دخول أي مستخدم،
فسوف أقوم ببساطة بإعادة التوجيه إلى المكون الرئيسي، لذا يتم
تنفيذ ذلك باستخدام هذا المسار الخاص الذي صممته هنا.
لذا، فإن المسار الخاص هو شيء مدعوم من قبل جهاز التوجيه
الذي نستخدم جهاز التوجيه React Dom الذي استخدمناه في تطبيق React الخاص بنا.
لذا، طريقة بسيطة للغاية للتعامل مع المواقف،
حيث لا تريد أن يتم الانتقال إلى طرق معينة عندما لا يتم تسجيل دخول المستخدم.
مرة أخرى، بعض التغييرات البسيطة التي قمت بها
على التطبيق لتسهيل
جميع الميزات المختلفة التي تراها في تطبيق React الخاص بك.
الآن، كما تتوقع،
قد تشعر بالإحباط عند هذه النقطة،
«هل هو بهذه البساطة في التنفيذ» وهذا هو
بالضبط ما تم القيام به لدعم جميع الميزات الجديدة.
كما ترى،
عملية مصادقة المستخدم وتسجيل الدخول والخروج منذ خادمنا لديه دعم كامل لكل شيء،
وتنفيذ تتبع جانب العميل
لعملية تسجيل الدخول والخروج للمستخدم وكل ما يصبح واضحًا إلى حد ما عن طريق
تعديل بعض المكونات و إضافة
في وظيفة المخفض المصادقة وإضافة في حالة المصادقة إلى متجر Redux الخاص بنا.
تصبح العملية برمتها للتعامل مع مصادقة المستخدم وتسجيل الدخول وتسجيل الخروج بسيطة إلى حد ما في هذه الحالة.
لذلك، مع هذه الجولة السريعة من رمز React المحدث،
دعونا نواصل فحص
تطبيق React الخاص بنا بعض الميزات الأخرى لتطبيق React الخاص بنا.
لذلك مرة أخرى، والعودة إلى طلبنا،
يمكننا الآن الذهاب إلى القائمة ومن ثم سحب ما يصل
أي طبق هنا ويمكنني نشر التعليقات على الطبق هنا،
لذلك أود أن إعداد على الفور تصنيف هنا وقيمة تعليقي هنا.
لاحظ أنني لا أدخل اسم المستخدم الخاص بي أو اسم المؤلف الخاص بي هنا في النموذج هنا.
الآن بالطبع، من أجل تقديم تعليق تحتاج إلى تسجيل الدخول.
لذلك، إذا لم تقم بتسجيل الدخول إلى هذا التعليق لن يتم قبوله من قبل الخادم الخاص بي.
لذلك، اسمحوا لي أولا تسجيل نفسي في.
لذلك، يمكنني تسجيل الدخول هنا
وفي اللحظة التي أقوم فيها بتسجيل الدخول تلاحظ على الفور أن
شريط أدوات الرأس يتم تحديثه للإشارة إلى حالتي.
الآن، يمكنني نشر هذا التعليق وستلاحظ أنه عندما أقوم بنشر التعليق،
يتم إضافة التعليق إلى قائمة التعليقات
وتلاحظ أيضًا أن حقل المؤلف يتم
ملؤه تلقائيًا هنا لأن هذه هي الطريقة التي نقوم بها بإعداد جانب الخادم الخاص بنا.
في حقل التعليقات،
قمنا بإعداد مستخدمنا كمرجع إلى
معلومات المستخدم التي نخزنها في
جانب الخادم الخاص بنا، وبما أننا نستخدم ملء Mongoose Populate على جانب الخادم،
يتم ملء معلومات المستخدم تلقائيًا
في التعليقات الواردة من جانب الخادم.
لذا، هذه هي الطريقة التي تلاحظ بها كيف يمكنني الاستفادة
من ما يقدمه الخادم بالفعل بالنسبة لي لملء التفاصيل تلقائيًا.
لذلك، تغييرات طفيفة مرة أخرى حتى
في صفحة تفاصيل الطبق لتعكس استخدام دعم التعليقات على موقع الخادم.
مع هذا، أكمل
التوضيح السريع لعميل React الذي قمنا بتنفيذه كجزء من
هذا التمرين، وآمل أن
تذهب من خلال تفاصيل التعليمات البرمجية في العميل أيضا ومن ثم
تعكس مرة أخرى على ما تعلمته في دورة React ونرى كيف
أن التعديلات تمكننا من التنفيذ في تعديل،
[غير مسموع] والتي هي الآن قادرة على التواصل مع الخادم ومن ثم دعم جميع الميزات التي
كنا نعتزم أصلا تنفيذها كجزء من كل من العميل والجانب الخادم.