كيفية إعادة توجيه المستخدم إلى صفحة أخرى بعد تسجيل الدخول باستخدام JavaScript Fetch API؟

في الكود المقدم، طريقة جلب JavaScript () يُستخدم لإرسال طلب POST إلى نقطة النهاية الخلفية باستخدام رمز مميز تم الحصول عليه من Google. عند التحقق من صحة الرمز المميز في الواجهة الخلفية، يتم إرجاع RedirectResponse برمز الحالة 303. ومع ذلك، لا تحدث إعادة التوجيه في المتصفح.

الخيار 1: إرجاع RedirectResponse

تتبع وظيفة الجلب () استجابات إعادة التوجيه افتراضيًا. ولذلك، يمكنك استخدام خصائص Response.redirected وResponse.url في استجابة fetch() لإعادة توجيه المستخدم يدويًا.

مثال عملي:

fetch('http://localhost:8000/login', {
  method: 'POST',
  headers: { ... },
  body: { ... },
  redirect: 'follow'
})
.then(res => {
  if (res.redirected) {
    window.location.href = res.url;
  } else {
    // Handle non-redirect responses
  }
})

الخيار 2: إرجاع استجابة JSON مع عنوان URL لإعادة التوجيه

بدلاً من ذلك، يمكن للواجهة الخلفية إرجاع استجابة JSON تحتوي على عنوان URL لإعادة التوجيه. على الواجهة الأمامية، يمكنك التحقق من وجود مفتاح "url" في الاستجابة وإعادة توجيه المستخدم وفقًا لذلك.

مثال عملي:

fetch('http://localhost:8000/login', {
  method: 'POST',
  headers: { ... },
  body: { ... },
})
.then(res => res.json())
.then(data => {
  if (data.url) {
    window.location.href = data.url;
  } else {
    // Handle non-redirect responses
  }
})

الخيار 3: استخدام HTML