[20240530] 소셜로그인 배포, 리액트-스프링 오류 해결

🧐 프론트엔드 로그인 연동 처리 방법 설명해드립니다.

아래 내용에 따라 프론트엔드 구상하시면 될 것 같습니다.

연동의 핵심인 7번 과정 처리 방법

네이버 로그인 성공을 하면 백엔드에서 프론트엔드로 이메일, 이름, 액세스토큰, 리프레시 토큰을 담은 JSON 객체를 보냅니다. 프론트에서는 이 JSON 객체를 로컬스토리지에 저장해서 꺼내서 사용하시면 됩니다.

async function naverLogin() {
    try {
      const urlParams = new URLSearchParams(window.location.search);
      const code = urlParams.get('code');

      const res = await axios.post(REACT_APP_API + `/api/user-info`, { token: code });
      const { accessToken, refreshToken, email, name } = res.data;

      // JSON 객체로 변환하여 로컬 스토리지에 저장
      const userInfo = {
        email,
        name,
        accessToken,
        refreshToken
      };
      localStorage.setItem('userInfo', JSON.stringify(userInfo));

    //   alert("로그인이 성공했습니다.");
      window.location.href = "/Home";
    } catch (error) {
      console.error("로그인 오류:", error);
    }
  }

위 로컬 스토리지 저장 작동 방식

로컬스토리지에 userInformation 상태변수에 {이메일, 이름, 액세스토큰, 리프레시 토큰} 객체 들어있습니다. (로컬스토리지 키값 'userInfo')

→ 여기서 로그인 유무, 이메일, 이름 등 꺼내서 처리하시면 됩니다!!

ex) 로그인 이후 페이지 구성법 로그인해야만 접근 가능한 게시판로 이동 시에는 위 객체에 Access Token이 있는 경우에만 접근할 수 있게 만드시면 될 것 같습니다!

특정 페이지에서 로그인을 해야만 접근 가능하게 하도록 하는 법

프론트엔드에서 해당 사용자인지 확인하기 위해 백엔드로 요청을 보냄 → Authorization 헤더에 액세스 토큰을 담아 보냄
백엔드에서는 해당 정보로 유저를 확인하고 작성자가 맞으면 특정 페이지에 접근 가능하도록 하면 됨 → 백엔드는 보통 OncePerRequestFilter를 상속받은 클래스를 만들어서 서명의 유효성이나 만기되었는지를 확인

🤔프론트 로그인 부분 궁금할 법한 부분 정리

Q. 로그아웃이나 창 끄면 어떻게 처리되나 ?

A. 로그아웃버튼 누르면 브라우저 로컬스토리지 초기화코드 짜시면 되시고, 창끄면 자동으로 로컬스토리지 초기화됩니다.

Q. 프론트에서 코드 짤때 로그인한 사람인지 어케하냐?

A. 위에서 설명했듯이 로컬스토리지에 액세스토큰이 존재하면 = 로그인한 사용자라는 뜻

추가로 Access Token이외에 refresh Token이 있는데 이는 Access Token 만료시에 재발급 받는 토큰입니다. → Access Token 만료시간 = 3600초

여기는 만료시간에 대한 처리하는 부분도 작업하면 좋지만 이 부분은 당장의 작업에 필요한 것이 아니라 차후 프론트 코드에 추가하면 될 것 같습니다. → 찾아보는 중

Chaeyeon0 / GreenDay_Study