리액트 로그인 상태 유지 어떻게 하시나요?

Question

상태 관리는 context api로 하고 있습니다. 로그인 시 accessToken과 refreshToken을 발급해주고 토큰들을 전부 쿠키에 저장해놓고 있는데페이지를 나갔을 시 액세스 토큰이 살아 있다면 유저 정보를 서버로부터 받아와서 로그인을 유지시키고, 액세스 토큰이 유효하지 않지만 리프레쉬 토큰이 살아있다면 액세스 토큰을 재발행해서 로그인을 유지시키고 싶습니다.서버와 통신을 해서 토큰 유효성 검사를 하는 코드를 어디서 짜야할까요? 최상위 컴포넌트에서 해야 할 것 같은데 챗 GPT한테 물어보니 context api의 Provider 함수 안에서 코드를 짜줍니다.추가로 로그인 상태를 유지하는 좋은 방법이 있다면 공유해주시면 정말정말 감사하겠습니다...

캐티 · Answer

세션유지와 토큰유지는 분리되어 있는 것인데요. 의도적으로 합쳐져 있는 경우도 있겠지만 흔하지 않을 것으로 전망해요. 세션과 토큰을 동시에 처리하려고 한다면 물음을 다시 생각 해보아야 하지 않겠나요.

chytonpide · Answer

일반적으로는 쿠키에 저장한 다음, 어플리케이션이 실행될때 contextAPI 에 쿠키에서 불러온 토큰을 다시 올립니다. 반대로 쿠키 갱신이 되었을때 contextAPI 의 state에도 반영하고 쿠키에도 반영해야 하구요. 이 방법이 가장 일반적인데 예쁘게 구현하려면 공수가 엄청 듭니다. axiosInstance.interceptors.request.use((config) &#61;> { const accessToken &#61; getAccessToken() if (accessToken !&#61; null) { // TODO: 토큰 만료 확인 후 만료인 경우 토큰갱신 } else { // TODO: 인증 만료 프로세스 실행 } return config })토큰 갱신이나, 요청시 header에 토큰을 설정하는건 인터셉터에 설정하는건 어떠신가요? 토큰 갱신은 인터셉터 부분에 accessToken 만료 되었는지 확인하고, 만료되었으면 토큰갱신을 먼저 하는 메카니즘을 추가해도 되고, setInterval 로 accessToken 을 정기적으로 체크하도록 하는 방법도 있구요.

charlatan · Answer

프론트 쪽에서는 사용자 정보를 검사하는 hook를 하나 만들어서 최상위 컴포넌트에서 호출해주면 비교적 간단하게 구현할 수 있습니다. 토큰이 유효한지 여부는 당연히 서버 쪽에서 해야하고 프론트엔드는 그것을 쿠키에 넣든 브라우저 스토리지에 넣든 결정하면 되겠죠.

개발잡부 · Answer

SPA라면 로컬변수에 저장한다.Redux와 같은 상태관리 프레임워크를 사용한다.매 요청마다 저장되어있는 AccessToken을 헤더에 넣고 요청을 보낸다서버에서는 매 요청마다 요청전에 Access Token 유효성검사를 한다.프론트에서는 4번에서 Reject되면 Token Refresh를 시도한다.5번도 실패하면 로그아웃 처리

리액트 로그인 상태 유지 어떻게 하시나요?

4개의 답변

Q&A 목록