كيف يقوم Angular باعتراض الطلبات وتغليفها؟

في المقالة السابقة، باستخدام وكيل Api في Angular، تعاملنا مع مشكلة واجهة تصحيح الأخطاء المشتركة المحلية واستخدمنا الوكيل.

تتم كتابة واجهاتنا ومعالجتها بشكل منفصل في مشاريع التطوير الفعلية، هناك العديد من الواجهات، بعضها يتطلب بيانات اعتماد تسجيل الدخول، والبعض الآخر لا يتطلب ذلك. إذا لم يتم التعامل مع كل واجهة بشكل صحيح، فهل يمكننا التفكير في اعتراض الطلب وتغليفه؟ [البرامج التعليمية الموصى بها: "Angular Tutorial"]

سيتم تنفيذ هذه المقالة.

للتمييز بين البيئات

، نحتاج إلى اعتراض الخدمات في بيئات مختلفة. عند استخدام angular-cli لإنشاء مشروع، فإنه يقوم تلقائيًا بتمييز البيئات في دليل app/enviroments :

Environmentals                                          
├── بيئة.prod.ts // التكوين المستخدم في بيئة الإنتاج └── بيئة.ts // التكوين المستخدم في بيئة التطوير

دعونا نعدل بيئة التطوير:

//enviroment.ts

بيئة ثبات التصدير = {
  عنوان URL الأساسي: ''،
  الإنتاج: كاذب
};

baseUrl هو حقل يُضاف أمام الطلب عند تقديم الطلب، وهو يشير إلى العنوان الذي تريد طلبه. لم أقم بإضافة أي شيء في الواقع، كان يعادل إضافة محتوى http://localhost:4200 .

بالطبع، يجب تعديل المحتوى الذي تضيفه هنا ليتوافق مع المحتوى المضاف على الوكيل الخاص بك. يمكن للقراء التفكير والتحقق بأنفسهم.

نقوم

بإنشاء خدمة اعتراضية http-interceptor.service.ts سيتم تمرير الطلب من خلال هذه الخدمة.

// http-interceptor.service.ts

استيراد {Injectable} من '@angular/core'؛
يستورد {
  حدث متشعب,
  المتشعب,
  HttpInterceptor, // Interceptor HttpRequest, // Request} from '@angular/common/http';

استيراد { يمكن ملاحظته } من 'rxjs'؛
استيراد { اضغط } من 'rxjs/operators'؛

استيراد {بيئة} من 'src/environments/environment'؛

@الحقن({
  المقدمة في: 'الجذر'
})
فئة التصدير HttpInterceptorService تنفذ HttpInterceptor {

  منشئ () { }

  اعتراض (req: HttpRequest<any>، التالي: HttpHandler): Observable<HttpEvent<any>> {
    دع SecureReq: HttpRequest<any> = req;

    SecureReq = SecureReq.clone({
      عنوان URL: Environment.baseUrl + req.url
    });

    إرجاع next.handle(secureReq).pipe(
      مقبض(
        (الرد: أي) => {
          // معالجة بيانات الاستجابة console.log(response)
        },
        (خطأ: أي) => {
          // معالجة بيانات الخطأ console.log(error)
        }
      )
    )
  }
}

لكي يصبح المعترض ساري المفعول، علينا إدخاله في app.module.ts :

// app.module.ts

استيراد { HttpClientModule، HTTP_INTERCEPTORS } من '@angular/common/http'؛
// خدمة الاعتراض import { HttpInterceptorService } from './services/http-interceptor.service';

مقدمي الخدمة: [
  // حقن التبعية {
    توفير: HTTP_INTERCEPTORS،
    فئة الاستخدام: خدمة HttpInterceptor،
    متعدد : صحيح
  }
]،

تم التحقق

في هذه المرحلة، لقد نجحنا في تنفيذ المعترض. إذا قمت بتشغيل npm run dev ، فسترى الرسالة التالية على وحدة التحكم:

للتحقق مما إذا كانت بيانات اعتماد المحتوى مطلوبة للوصول إلى المحتوى، استخدمت هنا واجهة [post] https://jimmyarea.com/api/private/leave/message لمحاولة الحصول على الخطأ التالي:

لقد عالجت الواجهة الخلفية بالفعل أن هذه الواجهة تتطلب بيانات اعتماد للعمل، لذلك تم الإبلاغ عن الخطأ 401 مباشرةً.

لذا، هنا تأتي المشكلة. بعد تسجيل الدخول، كيف نحتاج إلى إحضار بيانات الاعتماد الخاصة بنا؟

نقوم بتعديل محتوى المعترض على النحو التالي:

Let SecureReq: HttpRequest<any> = req;
// ...
// استخدم المضيف المحلي لتخزين بيانات اعتماد المستخدم في رأس الطلب if (window.localStorage.getItem('ut')) {
  دع الرمز المميز = window.localStorage.getItem('ut') || ''.
  SecureReq = SecureReq.clone({
    الرؤوس: req.headers.set('الرمز المميز'، الرمز المميز)
  });
}

// ...

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

[النهاية]