JavaScript Fetch API를 사용하여 로그인 후 사용자를 어떻게 리디렉션합니까?

JavaScript Fetch API를 사용하여 로그인 후 사용자를 다른 페이지로 리디렉션하는 방법은 무엇입니까?

문제

아래 JavaScript 코드를 사용하면 인증 토큰은 다음과 같습니다. 처음에는 firebase.auth() 메서드를 사용하여 획득했습니다. 그런 다음 FastAPI 백엔드에 POST 요청이 이루어집니다. 토큰이 유효하면 리디렉션 응답이 반환됩니다. 그러나 사용자는 실제로 리디렉션되지 않으며 원본 페이지는 계속 로드된 상태로 유지됩니다.

<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>

해결 방법: 옵션 1 - RedirectResponse 반환

기본적으로 JavaScript의 fetch() 메서드는 리디렉션 모드를 따르도록 합니다. 즉, 사용자가 새 페이지로 리디렉션되지 않고 대신 리디렉션 응답이 백그라운드에서 자동으로 처리됩니다. 리디렉션을 수동으로 처리하려면 리디렉션 모드를 수동으로 설정한 다음 Response.redirected 및 Response.url 속성을 사용하여 리디렉션 URL을 얻고 window.location.href 또는 window를 사용하여 사용자를 해당 URL로 리디렉션할 수 있습니다. .location.replace().

해결책: 옵션 2 - 리디렉션 URL이 포함된 JSON 응답 반환

서버에서 RedirectResponse를 반환하는 대신 URL이 포함된 일반 JSON 응답을 반환할 수 있습니다. JSON 객체에 포함됩니다. 클라이언트 측에서는 서버에서 반환된 JSON 객체에 url 키가 포함되어 있는지 확인하고, 그렇다면 해당 값을 검색하고 window.location.href 또는 window.location.replace()를 사용하여 사용자를 해당 URL로 리디렉션하세요.

해결책: 옵션 3 - HTML

사용 프런트엔드에서

fetch() 요청을 사용하는 것이 프로젝트의 요구 사항이 아닌 경우 일반 HTML 사용자가 제출 버튼을 클릭하여 서버에 POST 요청을 보내도록 합니다. 서버 측에서 RedirectResponse를 사용하면 양식이 제출될 때 사용자가 자동으로 대상 URL로 리디렉션됩니다.

위 내용은 JavaScript Fetch API를 사용하여 로그인 후 사용자를 어떻게 리디렉션합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!