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

제공된 코드에서 JavaScript fetch() 메서드는 Google에서 얻은 토큰을 사용하여 백엔드 엔드포인트에 POST 요청을 보내는 데 사용됩니다. 백엔드에서 토큰을 검증하면 상태 코드 303과 함께 RedirectResponse가 반환됩니다. 그러나 브라우저에서는 리디렉션이 발생하지 않습니다.

옵션 1: RedirectResponse 반환

fetch() 함수는 기본적으로 리디렉션 응답을 따릅니다. 따라서 fetch() 응답에서 Response.redirected 및 Response.url 속성을 사용하여 사용자를 수동으로 리디렉션할 수 있습니다.

작업 예:

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: 리디렉션 URL이 포함된 JSON 응답 반환

또는 백엔드가 리디렉션 URL이 포함된 JSON 응답을 반환할 수 있습니다. 프런트엔드에서는 응답에서 "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

fetch() 사용이 필요하지 않은 경우 제출 버튼이 있는 기존 HTML 양식을 사용할 수 있습니다. 양식이 제출되면 서버에서 RedirectResponse가 반환되면 브라우저가 자동으로 리디렉션을 처리합니다.