홈페이지>웹 디자인 튜토리얼>자바스크립트 튜토리얼

Angular는 요청을 어떻게 가로채고 캡슐화합니까?

저자：Eve Cole 업데이트 시간：2022-08-25 13:23:29
Angular는 요청을 어떻게 가로채고 캡슐화합니까? 다음 글에서는 Angular에서 요청 차단을 구현하는 방법을 소개하겠습니다. 도움이 되길 바랍니다.

이전 글에서는 Angular에서 Api 프록시를 사용하여 로컬 조인트 디버깅 인터페이스의 문제를 다루었고 프록시를 사용했습니다.

우리의 인터페이스는 별도로 작성되고 처리됩니다. 실제 개발 프로젝트에는 로그인 자격 증명이 필요한 인터페이스도 있고 그렇지 않은 인터페이스도 있습니다. 각 인터페이스가 제대로 처리되지 않으면 요청을 가로채서 캡슐화하는 것을 고려할 수 있습니까? [관련 추천 튜토리얼: "Angular Tutorial"]

이 글은 구현될 예정입니다.

환경을 구별하려면

서로 다른 환경에서 서비스를 가로채야 합니다.

Angle-cli를 사용하여 프로젝트를 생성하면 app/enviroments 디렉터리에서 
환경

angular-cli app/enviroments 으로 구별됩니다.

                                          
├── Environment.prod.ts // 프로덕션 환경에서 사용되는 구성 └── Environment.ts // 개발 환경에서 사용되는 구성

개발 환경을 수정해 보겠습니다.

// Enviroment.ts

const 환경 내보내기 = {
  기본 URL: '',
  생산: 거짓
};

baseUrl 요청 시 요청 앞에 추가되는 필드입니다. 사실 아무것도 추가하지 않았습니다. 이는 http://localhost:4200 의 내용을 추가하는 것과 같습니다.

물론, 여기에 추가하는 콘텐츠는 프록시에 추가된 콘텐츠와 일치하도록 조정되어야 합니다. 독자가 스스로 생각하고 확인할 수 있도록

http

http-interceptor.service.ts 인터셉터 서비스를 생성합니다. 요청은 이 서비스를 통해 진행됩니다.

// http-interceptor.service.ts

import { Injectable } from '@angular/core';
수입 {
  HTTP이벤트,
  Http핸들러,
  HttpInterceptor, // 인터셉터 HttpRequest, // '@angular/common/http'에서 요청};

'rxjs'에서 { Observable }을 가져옵니다.
'rxjs/operators'에서 가져오기 { 탭 };

'src/environments/environment'에서 { 환경 }을 가져옵니다.

@주입 가능({
  제공됨: '루트'
})
내보내기 클래스 HttpInterceptorService는 HttpInterceptor를 구현합니다.

  생성자() { }

  Intercept(req: HttpRequest<any>, 다음: HttpHandler): Observable<HttpEvent<any>> {
    let secureReq: HttpRequest<any> = req;

    secureReq = secureReq.clone({
      URL: 환경.baseUrl + req.url
    });

    return next.handle(secureReq).pipe(
      수도꼭지(
        (응답: 모두) => {
          // 응답 데이터 처리 console.log(response)
        },
        (오류: 모두) => {
          // 오류 데이터 처리 console.log(error)
        }
      )
    )
  }
}

인터셉터가 적용되려면 app.module.ts 에 삽입해야 합니다.

// app.module.ts

import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
//인터셉터 서비스 import { HttpInterceptorService } from './services/http-interceptor.service';

제공업체: [
  // 의존성 주입 {
    제공: HTTP_INTERCEPTORS,
    useClass: HttpInterceptorService,
    멀티: 사실,
  }
],
이 시점에서

검증을 통해

인터셉터를 성공적으로 구현했습니다. npm run dev 실행하면 콘솔에 다음 메시지가 표시됩니다.

1.png

콘텐츠에 액세스하는 데 콘텐츠 자격 증명이 필요한지 확인하기 위해 여기에서 [post] https://jimmyarea.com/api/private/leave/message 인터페이스를 사용하여 시도했지만 다음 오류가 발생했습니다.

2.png

백엔드에서는 이 인터페이스가 작동하려면 자격 증명이 필요하다는 것을 이미 처리했으므로 오류 401 이 직접 보고됩니다.

자, 여기서 문제가 발생합니다. 로그인한 후 자격 증명을 어떻게 가져와야 합니까?

다음과 같이 인터셉터 내용을 수정합니다:

let secureReq: HttpRequest<any> = req;
// ...
// localhost를 사용하여 요청 헤더에 사용자 자격 증명을 저장합니다. if (window.localStorage.getItem('ut')) {
  let 토큰 = window.localStorage.getItem('ut') ||
  secureReq = secureReq.clone({
    헤더: req.headers.set('token', token)
  });
}

// ...

이 인증서의 유효 기간은 독자가 시스템에 들어갈 때 유효 기간이 유효한지 판단한 다음 localstorage 값을 재설정하는 것을 고려해야 합니다. 그렇지 않으면 항상 오류가 보고됩니다. 이 또한 매우 간단합니다. localstorage 를 캡슐화하면 작업이 편리합니다~

[끝]
관련 기사