[react] request header에 있는 토큰을 바로 저장하는 방법은 없는 걸까요?

Question

안녕하세요! 저는 현재 부트캠프에서 프로젝트를 진행하고 있습니다.로그인 기능을 담당하고 있어서 이 기능을 구현해야 나머지 기능 구현을 속전속결로 할 수 있는데,아무리 정보를 찾고 찾아도 방법이 생각나지 않아 어려움을 겪고 있습니다.현재 상황은 이렇습니다.구글 로그인 버튼을 누르면 export const GoogleBtn = () => { const googleSocialLogin = () => { window.location.href = `${process.env.REACT_APP_API_URL}/oauth2/authorization/google`; }; return ( } text="구글 계정으로 로그인하기" /> ); }; 계정 선택하는 페이지로 이동합니다.계정을 선택하면 localhost:3000 으로 이동하면서 개발자 도구 -> 네트워크에 한가지 정보가 수신됩니다. (아래에서 google~~~ 에 해당하는 부분)아래처럼 해당 정보에 Authorization 과 Refresh를 가지고 엑세스 토큰, 리프레시 토큰을 저장하려고 하는데, 여기부터 방법을 모르겠습니다.선배님들의 경험을 공유해주시면 감사하겠습니다!

Jamie Hong · Answer

이거 스프링 oauth2로 로그인처리 하시는거죠? 버튼 href를 보니 그런거 같은데 redirect url을 fe router로 연결 하신거죠? 스프링으로 하실거면 redirect url을 fe로 해서 받은 데이터를 곧바로 be로 보내거나 애초에 redirect url을 곧바로 be로 받아서 자체로그인 처리(jwt발급, refresh token 발급 후 로그인 성공 처리.구글꺼 그대로 쓰지말고 자체발급) 하신 후에 다시 리다이렉트로 fe에 성공여부 데이터를 넘겨주고, fe에서는 성공/실패 여부에 따라 로그인처리 혹은 실패 랜더링 하시면 될거에요. 스프링 oauth2에서 구글이 가장 쉽고 예제코드도 많으니 구글링 해보세요. 자체적으로 로그인성공처리 로직을 짜셔야 합니다. oauthLoginSuccessHandler 코드 짜고 spring security 설정에 bean 등록.

캐티 · Answer

물음이 눈에 잘 안 들어와요.이렇지만 이 문제는 경험을 공유해줘야 해결되는 것이 아닌 것 같은데요.OAuth 방식으로 토큰과 HTTP 인증값을 localhost:3000 서버에 특정 주소로 잘 받았어요.응답(Response)헤더에 Authronization 헤더와 Refresh 헤더로 토큰 값을 잘 받았단 말이어요.정상적으로 값을 가져올 수 있는데 바로 저장, 아마도 변수에 바로 저장하도록 하는 방식 없는지, 물론 아주 많은 방법이 있을 것이나 정확한 물음을 받아야 하지 않겠나요.

우락곰 · Answer

혹시 해당부분 어떻게 해결하셨는지 알 수 있을까요?? 저도 응답헤더로 엑세스토큰을 넘겨받았는데 어떻게 사용해야할지 모르겠어서요..!

[react] request header에 있는 토큰을 바로 저장하는 방법은 없는 걸까요?

3개의 답변

기술 목록