Saya sedang membangun aplikasi web dengan pustaka JS yang berbeda (AngularJS, OpenLayers, ...) dan membutuhkan cara untuk mencegat semua tanggapan AJAX agar dapat, jika sesi pengguna yang dicatat kedaluwarsa (tanggapan kembali dengan 401 Unauthorizedstatus), untuk mengarahkannya ke halaman login.
Saya tahu AngularJS menawarkan interceptorsuntuk mengelola skenario seperti itu, tetapi tidak dapat menemukan cara untuk mencapai injeksi seperti itu ke dalam permintaan OpenLayers. Jadi saya memilih pendekatan vanilla JS.
Di sini saya menemukan potongan kode ini ...
(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);
... yang saya adaptasi dan sepertinya berperilaku seperti yang diharapkan (hanya mengujinya di Google Chrome terakhir).
Karena memodifikasi prototipe XMLHTTPRequest, saya bertanya-tanya seberapa berbahaya hal ini dapat terjadi atau jika dapat menghasilkan masalah kinerja yang serius. Dan apakah akan ada alternatif yang valid?
Pembaruan: cara mencegat permintaan sebelum dikirim
Trik sebelumnya bekerja dengan baik. Tetapi bagaimana jika dalam skenario yang sama Anda ingin memasukkan beberapa header sebelum permintaan dikirim? Lakukan hal berikut:
(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);