Bagaimana untuk Mengendalikan Lencongan Selepas Log Masuk dengan API Ambil JavaScript?

Bagaimana untuk mengubah hala pengguna ke halaman lain selepas log masuk menggunakan JavaScript Fetch API?

Apabila menggunakan fungsi fetch() untuk melaksanakan permintaan POST ke pelayan yang bertindak balas dengan RedirectResponse, ubah hala akan diikuti secara automatik pada sisi klien. Ini kerana mod ubah hala ditetapkan untuk mengikut secara lalai dalam fungsi fetch(). Akibatnya, pengguna tidak akan diubah hala ke URL baharu, sebaliknya fetch() akan mengikuti ubah hala tersebut di belakang tabir dan mengembalikan respons daripada URL ubah hala.

Untuk mengatasinya, anda boleh menyemak sama ada respons adalah hasil daripada permintaan yang anda buat yang telah diubah hala. Jika ya, anda boleh mendapatkan semula sifat url respons, yang akan mengembalikan URL akhir yang diperoleh **selepas** sebarang ubah hala dan menggunakan window.location.href JavaScript, anda boleh mengubah hala pengguna ke URL sasaran (iaitu, halaman ubah hala). Daripada window.location.href, seseorang juga boleh menggunakan window.location.replace(). Perbezaan daripada menetapkan nilai sifat href ialah apabila menggunakan kaedah location.replace(), selepas menavigasi ke URL yang diberikan, halaman semasa tidak akan disimpan dalam sejarah sesi—bermaksud pengguna tidak akan dapat menggunakan back butang untuk menavigasi ke sana.

Contoh kod:

<code class="javascript">document.getElementById("myForm").addEventListener("submit", function (e) {
  e.preventDefault(); // Cancel the default action
  var formElement = document.getElementById("myForm");
  var data = new FormData(formElement);
  fetch("http://my-server/login", {
    method: "POST",
    redirect: "follow", // Change it to "manual" if you want to handle redirects manually
    body: data,
  })
    .then((res) => {
      if (res.redirected) {
        window.location.href = res.url; // or, location.replace(res.url);
        return;
      } else {
        return res.text();
      }
    })
    .then((data) => {
      document.getElementById("response").innerHTML = data;
    })
    .catch((error) => {
      console.error(error);
    });
});</code>

Nota: Jika anda menggunakan permintaan silang asal, anda akan perlu menetapkan pengepala respons Access-Control-Expose-Headers pada bahagian pelayan untuk memasukkan pengepala Lokasi. Ini kerana hanya pengepala respons yang disenarai selamat CORS didedahkan secara lalai.

Atas ialah kandungan terperinci Bagaimana untuk Mengendalikan Lencongan Selepas Log Masuk dengan API Ambil JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!