더북(TheBook)

21.5.9 페이지 로딩할 때의 로그인 상태 확인

 

지금은 로그인 상태에서 페이지를 새로고침하면 상태가 초기화되어 버립니다. 리덕스 스토어 안에 있는 상태는 페이지를 새로 불러왔을 때 보존되지 않기 때문입니다.

현재 서버 세션상으로는 로그인 상태를 유지하기 때문에, 이전에 만든 checkLogin API를 호출하여 로그인 상태를 확인한 후 리덕스 스토어에 반영해 봅시다.

이 작업은 Base 컴포넌트에서 수행합니다. initialize 함수를 다음과 같이 작성하세요.

src/containers/common/Base.js - initialize

  initialize = async () => {
    const { BaseActions } = this.props;
    BaseActions.checkLogin();
  }

 

이렇게 하면 새로고침을 해도 클라이언트에서 로그인 상태가 유지됩니다. 페이지를 불러오면 checkLogin을 호출하면서 서버에 로그인 상태를 요청하고, 이에 따라 상태에 반영시켜 줍니다.

하지만 이것만으로는 충분하지 않습니다. 새로고침을 했을 때 checkLogin API가 응답할 때까지는 클라이언트에서 로그아웃 상태로 간주하기 때문이죠.

따라서 유저가 로그인했다면 새로고침을 해도 checkLogin이 응답할 때까지는 임시적으로 로그인 상태를 유지해야 합니다. 이는 HTML5의 localStorage를 사용하여 구현할 수 있습니다. localStorage에 값을 넣으면 페이지를 새로고침하거나 웹 브라우저를 닫았다 열어도 값을 유지합니다. 하지만 주의할 점은 값이 문자열 형태로 들어가므로 객체, 숫자, Boolean 등 값을 넣으면 JSON.stringify/JSON.parse를 사용하거나 문자열로 취급해야 한다는 것입니다.

신간 소식 구독하기
뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.