React, Spring Boot연동 로그인 정보 불러오기

React, Spring Boot연동 로그인 정보 불러오기

 

 

 

이전 게시물 참고

https://bmy1320.tistory.com/entry/React-%EC%B9%B4%EC%B9%B4%EC%98%A4-%EC%86%8C%EC%85%9C-%EB%A1%9C%EA%B7%B8%EC%9D%B8-Spring-Boot-%EC%97%B0%EB%8F%99-%EB%A6%AC%EC%95%A1%ED%8A%B8-%EC%B9%B4%EC%B9%B4%EC%98%A4-%EB%A1%9C%EA%B7%B8%EC%9D%B8-%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C

React 카카오 소셜 로그인 Spring Boot 연동 , 리액트 카카오 로그인 (프론트엔드)

 

 

------------------------------------------------------------------------------------------------------------------------------

 

 

이전에 소셜로그인을 구현했던걸 이용해서 마이페이지에서 로그인정보를 보여주려고하는데,

 

이때, 로그인정보를 가져오는 fetch 코드를 공유해본다.

 

같은 코드를 찾는 분들에게 도움이 되었으면 한다.

 

 

 

토큰을 저장하는것이나 소셜로그인 관련은 위에 이전 게시물을 확인바람.

 

 

const token = window.localStorage.getItem("token");

 

로컬에 저장되어있는 로그인정보 토큰을 getItem을 가지고 token이라는 변수에 저장해준다.

 

fetch를 할때, 백엔드에 이 토큰을 헤더에 담아서 같이 보내줘야하기때문에 필요하다.

 

 

 

 

 

 

 

export async function getMyPage() {
  const response = await fetch(
    "http://ec2-3-35-91-109.ap-northeast-2.compute.amazonaws.com:8081/api/user/mypage",
    {
      method: "GET",
      headers: {
        "content-type": "application/json",
        Authorization: token,
      },
    }
  );

  if (!response.ok) {
    throw new Error("마이페이지 정보를 불러오는데 실패했습니다");
  }
  const body = await response.json();
  return body;
}

 

 

다음과 같은 코드로 구현할 수 있다.

 

fetch 주소는 백엔드에서 설정한 주소이다.

 

헤더안에 Authorization 로 토큰을 담아서 백엔드로 전달해준다.

 

이때, 사용자 정보를 받아올것이기 때문에 GET을 사용한다.

 

 

이 코드는 가져오기만 하는것이므로, 가져온 정보를 다루는것은 각자 상황에 맞게 하면 된다.

 

나는 바디에 json으로 변환하여 담아 return해주었다.