ฉันกำลังสร้างเว็บแอปที่มีไลบรารี JS ที่แตกต่างกัน (AngularJS, OpenLayers, ... ) และต้องการวิธีสกัดกั้นการตอบสนองของ AJAX ทั้งหมดเพื่อให้สามารถใช้งานได้ในกรณีที่เซสชันผู้ใช้ที่บันทึกไว้หมดอายุ (การตอบกลับกลับมาพร้อมกับ401 Unauthorizedสถานะ) เพื่อเปลี่ยนเส้นทางเขา ไปที่หน้าเข้าสู่ระบบ
ฉันรู้ว่า AngularJS เสนอinterceptorsให้จัดการสถานการณ์ดังกล่าว แต่ไม่สามารถหาวิธีที่จะบรรลุการแทรกคำขอของ OpenLayers ได้ ดังนั้นฉันจึงเลือกใช้วิธี Vanilla JS
ที่นี่ฉันพบโค้ดชิ้นนี้ ...
(function(open) {
XMLHttpRequest.prototype.open = function(method, url, async, user, pass) {
this.addEventListener("readystatechange", function() {
console.log(this.readyState); // this one I changed
}, false);
open.call(this, method, url, async, user, pass);
};
})(XMLHttpRequest.prototype.open);... ซึ่งฉันปรับเปลี่ยนและดูเหมือนว่ามันจะทำงานตามที่คาดไว้ (ทดสอบบน Google Chrome ครั้งล่าสุดเท่านั้น)
เนื่องจากมีการปรับเปลี่ยนต้นแบบของ XMLHTTPR ขอฉันสงสัยว่าสิ่งนี้อาจส่งผลอันตรายหรืออาจทำให้เกิดปัญหาด้านประสิทธิภาพที่ร้ายแรงได้หรือไม่ และจะมีทางเลือกอื่นที่ถูกต้องหรือไม่?
อัปเดต: วิธีสกัดกั้นคำขอก่อนส่ง
เคล็ดลับก่อนหน้าใช้งานได้โอเค แต่ถ้าในสถานการณ์เดียวกันคุณต้องการฉีดส่วนหัวบางส่วนก่อนที่จะส่งคำขอ? ดำเนินการดังต่อไปนี้:
(function(send) {
XMLHttpRequest.prototype.send = function(data) {
// in this case I'm injecting an access token (eg. accessToken) in the request headers before it gets sent
if(accessToken) this.setRequestHeader('x-access-token', accessToken);
send.call(this, data);
};
})(XMLHttpRequest.prototype.send);