망냥
46
2020-11-26 03:33:46
6
2821

리액트 웹에서 새로고침 시 로그인 유지에 localStorage가 필요할까요?


필요한 부분만 인터넷 강의와 책을 보다보면서 하니 강의와 책의 방법이 달라서 저거 짜깁기 이거 짜깁기 하다보니 어찌저찌 돌아가긴 하는데 로그인 유지에 이게 맞는 과정인건지 잘 모르겠습니다 ㅠ  

로그인 모듈로 passport를 사용하고 있구요.  프론트에선 리덕스를 사용했습니다. 


 로그인 시 로컬 스토리지에 로그인한 회원 정보(닉네임, 아이디정도)를 저장하고,

새로고침 할 때마다 로컬 스토리지 확인해서 회원 정보가 있다면 로그인을 계속 하고 있는 것으로 액션을 디스패치하고, 

user 정보를 session id 사용해서 다시 불러와주는 api를 호출해서 유저 정보를 다시 불러오고 있습니다! 


이게 맞는건지 잘 모르겠는 부분이 로컬 스토리지를 사용하는 부분인데요.

쿠키에 session Id가 저장이 되어있는데, 딱히 별다른 특별한 정보가 담기지 않은 로컬 스토리지도 같이 사용하는게 맞는건가? 싶어서 질문드립니다... 

프론트쪽에서도 쿠키를 읽어서 세션 id가 있다면 로그인 되어있는 것으로 취급해서 로그인을 디스패치 해야되는걸까요? 아니면 다른 더 좋은 방법이 있을까요?


0
  • 답변 6

  • kenu
    58k
    2020-11-26 04:21:43 작성 2020-11-26 09:32:22 수정됨

    가능합니다. localStorage

    sessionStorage는 개인적으로 권장하지 않습니다.

    이리나이 님 감사합니다.


  • 송서리
    2020-11-26 08:34:51

    저는 쿠키만 사용해서 로그인세션을 저장하고 있습니다. 

  • 이리나이
    2k
    2020-11-26 08:52:49

    세션 스토리지 새로고침 하면 다 날라간다는 소리는 처음 듣네요. 브라우저를 끄면 몰라도요. 단지 탭끼리 공유가 안되는데, 탭끼리 공유하는 방법도 있습니다. 전에 그렇게 개발한적도 있고..

  • 개이득인개발
    4k
    2020-11-26 09:33:28 작성 2020-11-26 09:34:01 수정됨

    세션 스토리지는 새로고침시 초기화되지 않습니다. 브라우저 종료시에만 종료됩니다.

    그리고 브라우저 스토리지엔 아무리 보안등급이 낮은 정보라도 회원정보를 저장하는건 지양합니다.

    완전 초보이신거 같은데 일단 리덕스를 먼저 보시고 비동기 상태관리(성크, 사가, mobx)를 하시죠 패스포트를 사용하고 계시다면 웹서버는 구축을 하신상태니 서버사이드 렌더링을 하시면 본인이 원하는 결과를 얻으실 수 있습니다,


  • 개이득인개발
    4k
    2020-11-26 09:49:22
    window객체는 전역객체로 렌더링시에는 접근이 불가합니다. 아마 useEffect에서 다시 회원정보를 검증하시는것 같은데 그러면 화면이 깜빡거리면서 비로그인 화면에서 다시 로그인된 화면으로 될텐데 좋지않은 방법입니다.
  • 망냥
    46
    2020-11-26 12:55:04 작성 2020-11-26 13:00:30 수정됨

    송서리 님, 

    쿠키만 사용한다면 제가 글에 적은 것처럼 그냥 session id 존재여부만 파악해서 로그인을 유지하는 식으로 작동할까요??


    서버 사이드 렌더링이 왜 필요한 지 몰라서 넘어갔는데 이럴 때 필요한거군요 ㅠ 

    index.js 파일에서 로컬 스토리지를 체크한 다음에 있다면 유저 로그인을 디스패치하는 펑션을 만들어서 썼습니다. 새로고침 할 때마다 2번씩 화면이 바뀌지는 않는데... 좋지 않은 방법인가보네요 ㅠ 

    서버 사이드 렌더링을 공부해서 적용해보겠습니다. 감사합니다!! 

  • 로그인을 하시면 답변을 등록할 수 있습니다.