새로고침 시 로그인 유지할 때 어떤식으로 하나요?

Question

안녕하세요. 서버를 구축하고  JWT로 로그인 구현 연습 중인 프론트엔드 개발자 지망생입니다.

로그인을 했을때 서버에서 액세스 토큰과 유저 정보(유저 이름)를 받고 토큰은 웹 로컬스토리지에 저장하고 유저 정보는 리덕스로 상태를 관리하였습니다. 하지만 새로고침을 하면 리덕스의 상태가 없어져서 화면에 표시한 유저정보(유저 이름)가 사라지는 문제가 발생합니다.

이에 저는 2가지 방법을 생각해봤습니다. 
1. 로그인을 한 후 토큰 뿐만 아니라 유저 정보(유저이름)도 같이 웹 로컬스토리지에 저장하여 app.js 첫 렌더링 시 유저 정보를 리덕스 상태에 넣기
2. 토큰만 저장하고 새로고침할 때 마다 서버에 요청해서 유저 정보를 가져오기
위 두 방법 중 어떤 방법이 옳은 방법인지 궁금합니다. 
아니면 더 좋은 방법이 있는 지 궁금합니다.

김인후 · Answer

해당과 같은 케이스면 redux-persit을 사용해서 리덕스 상탸랄 localstorage에 저장하여 새로고침에도 안 날라가게 할 거 같네요

무지55 · Answer

redux-persist를 사용하거나,

페이지가 마운트 되었을때
스토리지에 웹토큰이 있는지, 웹토큰은 정상인지 검사를 한 후 리덕스로 값을 저장하면 될거같습니다

백승훈 · Answer

조금 벗어난 이야기지만 전자와 같이 로컬스토리지로 저장한다면 예외처리에 신경써야 합니다. 다른 PC나 기기로 유저이름을 변경하던가 할 경우 이전 정보가 남아있다면 로컬스토리지 정보를 가져올 때 이전 이름이 표시되던지 할 수 있습니다.

로그인 유지 전략이 어떻게 되는지는 모르겠지만 자동로그인 기능에 연결해서 토큰의 유효성 인증을 할 때 이름 정보를 받아오던지의 방법을 생각해볼 수도 있습니다.

새로고침 시 토큰이 유효한지 어차피 검사가 필요할탠대 (웹 첫 기동시 init절차) 이 때 이름을 같이 받아오던지 하는 방식도 고려할 것 같네요 👍