개발자

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

2024년 05월 07일조회 458

안녕하세요. 서버를 구축하고 JWT로 로그인 구현 연습 중인 프론트엔드 개발자 지망생입니다. 로그인을 했을때 서버에서 액세스 토큰과 유저 정보(유저 이름)를 받고 토큰은 웹 로컬스토리지에 저장하고 유저 정보는 리덕스로 상태를 관리하였습니다. 하지만 새로고침을 하면 리덕스의 상태가 없어져서 화면에 표시한 유저정보(유저 이름)가 사라지는 문제가 발생합니다. 이에 저는 2가지 방법을 생각해봤습니다. 1. 로그인을 한 후 토큰 뿐만 아니라 유저 정보(유저이름)도 같이 웹 로컬스토리지에 저장하여 app.js 첫 렌더링 시 유저 정보를 리덕스 상태에 넣기 2. 토큰만 저장하고 새로고침할 때 마다 서버에 요청해서 유저 정보를 가져오기 위 두 방법 중 어떤 방법이 옳은 방법인지 궁금합니다. 아니면 더 좋은 방법이 있는 지 궁금합니다.

이 질문이 도움이 되었나요?
'추천해요' 버튼을 누르면 좋은 질문이 더 많은 사람에게 노출될 수 있어요. '보충이 필요해요' 버튼을 누르면 질문자에게 질문 내용 보충을 요청하는 알림이 가요.

답변 3

김인후님의 프로필 사진

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

무지55님의 프로필 사진

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

백승훈님의 프로필 사진

조금 벗어난 이야기지만 전자와 같이 로컬스토리지로 저장한다면 예외처리에 신경써야 합니다. 다른 PC나 기기로 유저이름을 변경하던가 할 경우 이전 정보가 남아있다면 로컬스토리지 정보를 가져올 때 이전 이름이 표시되던지 할 수 있습니다. 로그인 유지 전략이 어떻게 되는지는 모르겠지만 자동로그인 기능에 연결해서 토큰의 유효성 인증을 할 때 이름 정보를 받아오던지의 방법을 생각해볼 수도 있습니다. 새로고침 시 토큰이 유효한지 어차피 검사가 필요할탠대 (웹 첫 기동시 init절차) 이 때 이름을 같이 받아오던지 하는 방식도 고려할 것 같네요 👍

지금 가입하면 모든 질문의 답변을 볼 수 있어요!

현직자들의 명쾌한 답변을 얻을 수 있어요.

또는

이미 회원이신가요?

AI 답변
커리어리 AI 봇 프로필 이미지

커리어리 AI 봇

GPT가 달아주는 답변입니다.

2024년 05월 07일

두 방법인 유저 정보를 웹 로컬스토리지에 저장하거나 새로고침할 때 서버에 요청해서 유저 정보를 가져오는 방법 모두 장단점이 있습니다. 1. 유저 정보를 웹 로컬스토리지에 저장하는 경우: 장점: 새로 고침을 할 때마다 서버에 요청하지 않아도 되므로, 불필요한 네트워크 트래픽을 줄일 수 있습니다. 단점: 만약 유저 정보가 변경된 경우, 클라이언트의 로컬 스토리지와 서버의 데이터간에 일관성을 유지하는 것이 어려울 수 있습니다. 2. 새로고침할 때 마다 서버에 요청해서 유저 정보를 가져오는 경우: 장점: 항상 최신의 사용자 정보를 가질 수 있습니다. 단점: 페이지를 새로 고침 하는 각 시기마다 추가적인 HTTP 요청이 필요하여 성능에 영향을 주거나, 서버 부하가 발생할 수 있습니다. 따라서 선택은 여러 상황과 요구 사항(예: 사용자 데이터의 실시간성, 애플리케이션의 성능 등)을 종합적으로 고려하면서 해야 합니다. 또한, 보안도 고려해야 하는데, 웹 로컬 스토리지는 XSS(크로스 사이트 스크립팅)공격에 취약하므로 중요 정보를 저장하는 것은 좋지 않습니다. 따라서 필요한 경우에만 로컬 스토리지를 사용하고, 가능하다면 HttpOnly 쿠키 등을 사용하여 보안을 강화하는 방법을 검토해 볼 수 있습니다.

목록으로

지금 가입하면 모든 질문의 답변을 볼 수 있어요!