요구사항: 모든 XMLHttpRequest 요청을 가로채고, 백엔드 인터페이스가 로그인 무효 상태를 반환하면 바로 로그인 인터페이스로 점프하여 더 이상 전송하지 않습니다. 또한 통합 서명, 자동 프로토콜 해석, 인터페이스 호출 통계 등 추가 요청에도 사용할 수 있습니다.
복습:
jQuery는 Ajax 요청을 가로챌 수 있지만, jQuery 내 ajax 메서드를 사용하는 호출자로만 제한되며 네이티브 XMLHttpRequest를 사용하는 요청을 가로챌 수 없습니다.jQuery의 ajax 요청도 XMLHttpRequest의 캡슐화이기 때문에, 실제로 XMLHttpRequest를 가로챌 수 있습니다。
ajax-hook은 브라우저의 XMLHttpRequest 객체를 가로채기 위한 경량 라이브러리로, XMLHttpRequest 객체가 요청을 시작하기 전, 응답 내용을 받은 후, 오류가 발생할 때 요청, 응답, 오류를 사전 처리하는 데 사용됩니다. Ajax-hook은 ES6 기능에 의존하지 않아 ES5를 지원하는 모든 브라우저에서 매우 호환성이 높고 실행할 수 있습니다.
원칙: ajax-hook은 XMLHttpRequest 내 메서드와 속성을 맞춤화하여 전역 XMLHttpRequest 객체를 덮어씁니다. XMLHttpRequest 객체를 위해 프록시 계층이 랩핑됩니다.
오픈 소스 주소:하이퍼링크 로그인이 보입니다.
CDN 주소:하이퍼링크 로그인이 보입니다.
프록시 vs. 훅
proxy()와 hook() 모두 글로벌 XMLHttpRequests를 가로채는 데 사용할 수 있습니다. 이들의 차이점은 다음과 같습니다:hook()는 미세한 인터셉트 세분성을 가집니다, 는 XMLHttpRequest 객체의 특정 메서드, 속성 또는 콜백에 특정할 수 있지만, 사용이 더 번거롭고, 비즈니스 로직이 여러 콜백에 분산되어야 할 뿐만 아니라 오류가 발생할 위험도 많습니다. 반면proxy()는 높은 추상화를 가집니다, 그리고 요청 컨텍스트가 구축되며(각 콜백에서 요청 정보 구성이 직접 얻을 수 있음), 이는 더 간단하고 효율적으로 사용할 수 있습니다.
대부분의 경우, 우리는필요에 맞지 않는 한 proxy() 방식을 사용하는 것이 권장됩니다。
ajax-hook에서 jQuery ajax 요청 인터셉션과 프록시 인터셉션을 추가해 보세요. 코드는 다음과 같습니다:
jQuery로 get 요청을 보내보면 확인할 수 있습니다둘 다 요격할 수 있습니다, 아래 그림에서 볼 수 있습니다:
네이티브 XMLHttpRequest를 사용해 요청을 보내기, discover오직 아약스-훅만이 가로챌 수 있습니다, 아래 그림에서 볼 수 있습니다:
ajax-hook 프록시의 더 많은 활용 사례:
본보기:하이퍼링크 로그인이 보입니다.
(끝)
|
게시됨 2023. 6. 22. 오전 10:29:45
|
|
|
|
집주인|
게시됨 2023. 6. 22. 오전 10:32:52
|
