프론트엔드에서 로그인 후 redirect를 어떻게 하나요?

Question

안녕하세요. 프론트엔드 쪽을 잘 몰라서 질문 올립니다. (프론트엔드라고 해도 되는 건지도 모르겠지만)먼저 백엔드에서 보통 JWT 토큰을 사용한다고 했을 때 로그인을 요청한 후 발급받은 JWT 토큰을 프론트엔드에서는 localStorage 또는 cookie 등에 저장하는 것으로 알고 있습니다. 이때 authentication이 완료된 후 다시 redirect(e.g.홈페이지)를 해야하는데 어떻게 하는지 모르겠습니다. 저는 ajax 밖에 몰라서 ajax로 해보고 있는데요. 구체적으로 우선 아래처럼 ajax를 사용해서 로그인 요청을 한 후 발급받은 토큰들을 localStorage에 저장합니다.$.ajax({ url: '/api/v1/signin', type: 'POST', data: formData, beforeSend: function (xhr) { xhr.setRequestHeader(csrfHeader, csrfToken); }, success: function (result) { localStorage.setItem('accessToken', result['accessToken']); localStorage.setItem('refreshToken', result['refreshToken']); loginRedirect(); }, error: function (result) { console.log(result['message']); } }); 이후 redirect(위 success의 loginRedirect())를 다음과 같이 구현했습니다. (안되지만)function loginRedirect() { $.ajax({ url: '/', type: 'GET', headers: { 'Authorization': &#96;Bearer ${localStorage.getItem(ACCESS_TOKEN)}&#96;, 'Refresh-Token': localStorage.getItem(REFRESH_TOKEN) }, error: function (result) { console.log(result['message']); } }) }이처럼 발급받은 토큰으로 다시 redirect 하는 것을 프론트엔드에서는 어떻게 처리하는지 알려주시면 감사하겠습니다. 참고할 수 있는 포스트나 github 링크라도 상관없습니다.

Bumpist · Answer

리액트를 기준으로 설명드리면, 로그인 로직이 성공적으로 처리되어서 로컬스토리지에 토큰이 저장되어있다면 토큰존재여부({localStorage.getItem(ACCESS_TOKEN)이 undifined가 아니라면 or undifined 라면)로 분기하여 useNavigate를 이용해서 navigate('/') 이런식으루 메인페이지로 라우팅하는식으로 처리할거같아요!

김을동 · Answer

그냥 단순 이동은 location.href = "/"하면 됩니다

고랭지고구마 · Answer

location.href = "/" 하면 됩니다. 해당 URL로 접근 후 Security 인증, 권한 여부에 따라서 서버에서 redirect 하시면 될것 같습니다.

프론트엔드에서 로그인 후 redirect를 어떻게 하나요?

3개의 답변

#authentication 목록