API, 요청 코드 리팩토링

김태성·2024년 9월 12일

개인 프로젝트-1

목록 보기
39/53
post-thumbnail

로그인도 끝났겠다, 코드를 리팩토링 할 시간이다.
불편한게 한두가지가 아니다.

redirect

회원가입을 하는 창이다.
주소를 보면 데이터가 전부 노출되어 있다...
그 이유는 구글 oauth를 사용하면 json값만 리턴하는데, redirect를 통해서 백엔드가
프론트 페이지 이동을 명령해야 하기 때문이다.

그래서 생각해낸 것이

  1. 구글에서 인증을 해주는데 비밀번호가 필요할까?
  2. 쿠키로 데이터를 보내면 되지 않나?

그래서 생각해낸 것은 다음과 같다.

  1. jwt 토큰에는 emil이 들어간다.
  2. 이때 T/F 값이 하나 들어가는데(string), 이걸로 회원가입 되어있는지 아닌지 판별한다.
  3. oauth 로그인을 하면 일단 jwt 쿠키를 하나 받고, 이걸 다시 서버로 보낸다.
  4. 이때 t값이면 로그인 성공, f면 회원가입 페이지로 보내버린다.

그래서 OAuth 로그인을 하면 가입 여부에 따라서 T/F의 값을 가진 토큰을 발급해 준다.

로그인을 눌렀을때 쿠키가 들어오지만 로그인은 안되는 모습.

쿠키를 까면 False라는 값이 들어있다.

이후 main으로 naviate 한 후, 이 쿠키 값을 서버에 확인받아야 한다.

jwt를 검증받는 서버 코드이다.

회원가입이 되어있지 않다면 회원가입 페이지로 이동하고, jwt를 서버에 제공해서
jwt에 있는 email 값을 받는다.

단순히 데이터를 까서 확인시켜주는 api이다.

회원가입 페이지에서 parameter로 받던 데이터를 Post의 Body와 쿠키로 받기때문에
데이터의 노출이 적어졌다.

이후 로직은 회원가입을 하는것이다.

그리고 axios도 좀 손봤다.
local에서 하는 요청은 local로, 배포환경에서는 배포로 요청하는 것이다.

이전에 이렇게 정신사나운 짓을 했었다.
localhost에서 배포된 서버로 데이터를 요청한다는 것이다.

하지만 현 시점에서는 cors문제와 local<-> 배포 url 변경을 싹다 자동화 시켰기 때문에
local로 테스트 하다가도 바로 배포할 수 있게 되었다.
따라서 local의 테스트는 local끼리 하기로 했다.

그리고 진짜 골치아팠던게 이거다. google OAuth 반환값은 데이터를 뱉는데, redirect를 하지 않게 되면..

이처럼 이상한 url로 튕겨버린다. 뒤에 parameter로 데이터가 들어오고 있다.
그래서 Host로 리다이랙트 시키게 만들었다.
저 HOST는 환경변수인데, local 에서는 localhost로, 배포환경에서는 배포 url로 이동한다.

profile
닭이 되고싶은 병아리

0개의 댓글