Angular สกัดกั้นและสรุปคำขออย่างไร

ในบทความก่อนหน้านี้ การใช้พร็อกซี Api ใน Angular เราจัดการกับปัญหาของอินเทอร์เฟซการดีบักร่วมภายในและพร็อกซีที่ใช้

อินเทอร์เฟซของเราเขียนและประมวลผลแยกกัน ในโครงการพัฒนาจริง มีอินเทอร์เฟซจำนวนมาก ซึ่งบางส่วนต้องใช้ข้อมูลรับรองการเข้าสู่ระบบ และบางส่วนไม่จำเป็นต้องใช้ หากแต่ละอินเทอร์เฟซไม่ได้รับการจัดการอย่างเหมาะสม เราจะพิจารณาสกัดกั้นและสรุปคำขอได้หรือไม่ [บทช่วยสอนที่เกี่ยวข้องที่แนะนำ: "บทช่วยสอนเชิงมุม"]

บทความนี้จะถูกนำมาใช้

เพื่อแยกความแตกต่างระหว่างสภาพแวดล้อม

เราจำเป็นต้องสกัดกั้นบริการในสภาพแวดล้อมที่แตกต่างกัน เมื่อใช้ angular-cli เพื่อสร้างโปรเจ็กต์ ระบบจะแยกแยะสภาพแวดล้อมโดยอัตโนมัติในไดเรกทอรี app/enviroments :

สภาพแวดล้อม                                          
├── สภาพแวดล้อม.prod.ts // การกำหนดค่าที่ใช้ในสภาพแวดล้อมการผลิต └── สภาพแวดล้อม ts // การกำหนดค่าที่ใช้ในสภาพแวดล้อมการพัฒนา

มาแก้ไขสภาพแวดล้อมการพัฒนากันเถอะ:

// enviroment.ts

ส่งออกสภาพแวดล้อม const = {
  URL ฐาน: '',
  การผลิต: เท็จ
};

baseUrl คือช่องที่เพิ่มไว้หน้าคำขอเมื่อคุณส่งคำขอ โดยจะชี้ไปยังที่อยู่ที่คุณต้องการขอ ฉันไม่ได้เพิ่มอะไรเลย จริงๆ แล้วมันก็เทียบเท่ากับการเพิ่มเนื้อหาของ http://localhost:4200

แน่นอนว่าเนื้อหาที่คุณเพิ่มที่นี่จะต้องถูกปรับให้ตรงกับเนื้อหาที่เพิ่มในพรอกซีของคุณ ผู้อ่านสามารถคิดและตรวจสอบได้ด้วยตัวเอง

เพิ่ม

บริการดักจับ http-interceptor.service.ts คำขอจะผ่านบริการนี้

// http-interceptor.service.ts

นำเข้า { ฉีดได้ } จาก '@ เชิงมุม/แกน';
นำเข้า {
  เหตุการณ์ Http,
  HttpHandler,
  HttpInterceptor, // Interceptor HttpRequest, // คำขอ} จาก '@ เชิงมุม/common/http';

นำเข้า { สังเกตได้ } จาก 'rxjs';
นำเข้า { แตะ } จาก 'rxjs/operators';

นำเข้า { สภาพแวดล้อม } จาก 'src/environments/environment';

@ฉีด({
  ให้ไว้ใน: 'ราก'
-
คลาสส่งออก HttpInterceptorService ใช้ HttpInterceptor {

  ตัวสร้าง () { }

  สกัดกั้น (คำขอ: HttpRequest <ใด ๆ > ถัดไป: HttpHandler): สังเกตได้ <HttpEvent <ใด ๆ>> {
    ให้ SecureReq: HttpRequest<any> = req;

    SecureReq = SecureReq.clone({
      URL: สภาพแวดล้อม.baseUrl + req.url
    -

    กลับ next.handle (secureReq).pipe(
      แตะ(
        (ตอบกลับ: ใด ๆ ) => {
          // ประมวลผลข้อมูลการตอบสนอง console.log(response)
        -
        (ข้อผิดพลาด: ใด ๆ ) => {
          // จัดการข้อมูลข้อผิดพลาด console.log (ข้อผิดพลาด)
        -
      -
    -
  -
}

เพื่อให้ interceptor มีผล เราต้องฉีดมันไปที่ app.module.ts :

// app.module.ts

นำเข้า { HttpClientModule, HTTP_INTERCEPTORS } จาก '@ เชิงมุม/common/http';
//นำเข้าบริการ Interceptor { HttpInterceptorService } จาก './services/http-interceptor.service';

ผู้ให้บริการ: [
  // การฉีดพึ่งพา {
    ให้: HTTP_INTERCEPTORS,
    useClass: HttpInterceptorService,
    หลาย: จริง,
  -
]

การยืนยัน

ณ จุดนี้ เราได้ติดตั้ง Interceptor สำเร็จแล้ว หากคุณรัน npm run dev คุณจะเห็นข้อความต่อไปนี้บนคอนโซล:

เพื่อตรวจสอบว่าจำเป็นต้องใช้ข้อมูลรับรองเนื้อหาเพื่อเข้าถึงเนื้อหาหรือไม่ ฉันใช้อินเทอร์เฟซ [post] https://jimmyarea.com/api/private/leave/message เพื่อลองและได้รับข้อผิดพลาดต่อไปนี้:

แบ็กเอนด์ได้ประมวลผลแล้วว่าอินเทอร์เฟซนี้ต้องใช้ข้อมูลรับรองจึงจะทำงานได้ จึงมีการรายงานข้อผิดพลาด 401 โดยตรง

เอาล่ะ มาถึงปัญหาแล้ว หลังจากที่เราเข้าสู่ระบบแล้ว เราต้องนำข้อมูลประจำตัวของเรามาอย่างไร?

ดังต่อไปนี้ เราแก้ไขเนื้อหา interceptor:

ให้ SecureReq: HttpRequest<any> = req;
-
// ใช้ localhost เพื่อจัดเก็บข้อมูลรับรองผู้ใช้ในส่วนหัวของคำขอ if (window.localStorage.getItem('ut')) {
  ให้โทเค็น = window.localStorage.getItem('ut') ||. ''
  SecureReq = SecureReq.clone({
    ส่วนหัว: req.headers.set('โทเค็น', โทเค็น)
  -
-

// ...

ระยะเวลาที่ถูกต้องของใบรับรองนี้ต้องการให้ผู้อ่านตัดสินว่าระยะเวลาที่ถูกต้องเมื่อเข้าสู่ระบบแล้วพิจารณารีเซ็ตค่าของ localstorage มิฉะนั้นข้อผิดพลาดจะถูกรายงานเสมอ สิ่งนี้ก็ง่ายมากเช่นกัน การห่อหุ้ม localstorage สะดวกต่อการใช้งาน ใช่~

[สิ้นสุด]