Bagaimanakah Saya Ubah Hala Pengguna Selepas Log Masuk Menggunakan API Ambil JavaScript?

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

Masalah

Menggunakan kod JavaScript di bawah, token pengesahan ialah pertama kali diperoleh menggunakan kaedah firebase.auth(). Permintaan POST kemudiannya dibuat ke bahagian belakang FastAPI. Jika token itu sah, respons ubah hala dikembalikan. Walau bagaimanapun, pengguna sebenarnya tidak diubah hala dan halaman asal kekal dimuatkan.

<code class="javascript">function loginGoogle() {
  var provider = new firebase.auth.GoogleAuthProvider();
  firebase.auth()
    .signInWithPopup(provider)
    .then((result) => {
      // ...
    })
    .catch((error) => {
      // Handle Errors here.
      // ...
    });

  firebase.auth().currentUser.getIdToken(true).then((idToken) => {
    // ...
    const headers = new Headers({
      'x-auth-token': idToken
    });
    const request = new Request('http://localhost:8000/login', {
      method: 'POST',
      headers: headers
    });
    fetch(request)
      .then(response => response.json())
      .then(data => console.log(data))
      .catch(error => console.error(error));
  });
}</code>

Penyelesaian: Pilihan 1 - Returning RedirectResponse

Secara lalai, kaedah fetch() dalam JavaScript menetapkan mod ubah hala untuk diikuti, bermakna pengguna tidak akan diubah hala ke halaman baharu tetapi sebaliknya tindak balas ubah hala akan dikendalikan secara automatik di belakang tabir. Jika anda ingin mengendalikan ubah hala secara manual, anda boleh menetapkan mod ubah hala kepada manual dan kemudian gunakan sifat Response.redirected dan Response.url untuk mendapatkan URL ubah hala dan mengubah hala pengguna sendiri ke URL tersebut menggunakan window.location.href atau window .location.replace().

Penyelesaian: Pilihan 2 - Mengembalikan respons JSON yang mengandungi URL ubah hala

Daripada mengembalikan RedirectResponse daripada pelayan, anda boleh mengembalikan respons JSON biasa dengan URL disertakan dalam objek JSON. Di sisi klien, semak sama ada objek JSON yang dikembalikan daripada pelayan termasuk kunci url, dan jika ya, dapatkan semula nilainya dan ubah hala pengguna ke URL tersebut menggunakan window.location.href atau window.location.replace().

Penyelesaian: Pilihan 3 - Menggunakan HTML

di bahagian hadapan

Jika menggunakan permintaan fetch() bukan keperluan untuk projek anda, pertimbangkan untuk menggunakan HTML biasa dan minta pengguna mengklik butang hantar untuk menghantar permintaan POST ke pelayan. Menggunakan RedirectResponse pada bahagian pelayan akan menyebabkan pengguna diubah hala secara automatik ke URL sasaran apabila borang diserahkan.

Atas ialah kandungan terperinci Bagaimanakah Saya Ubah Hala Pengguna Selepas Log Masuk Menggunakan API Ambil JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!