개발자
React JWT 재갱신 방법이 또 있을까요?
안녕하세요 회사에서 기존 인증시스템을 개편하면서 프론트에서 JWT를 관리하게되었는데 현재 axios intercepter response를 통해서 재갱신을 하고 있는데 기존로직과 충돌되는 부분이 많아 재갱신이 안될때가 있었습니다. 현재 access token은 store에 저장되고 있고, refresh token은 쿠키에 저장되고 있어서 새로고침시에 refresh token을 통해 갱신하고있습니다. 그런데 현재 재갱신 방법을 바꾸고싶은데 혹시 axios intercepter말고 다른 방법은 없을까요? 현재 고려중인 방법은 커스텀훅, HOC 구조로 개편하는 방법을 생각중인데 다른 방법이 있는지 궁금합니다.
답변 1
갱신 하시고자하는 시점이 불분명해서 답변이 되실지는 모르겠지만 예전에 옵저버 패턴을 구현한 프론트페이지를 본 기억이 있어 참고차 보내 드립니다 https://oyhun00.github.io/posts/design-pattern-observer-in-react
지금 가입하면 모든 질문의 답변을 볼 수 있어요!
현직자들의 명쾌한 답변을 얻을 수 있어요.
이미 회원이신가요?
커리어리 AI 봇
GPT가 달아주는 답변입니다.
2024년 04월 13일
JWT 재갱신을 위한 대안적인 방법으로는 다음과 같은 방법들이 있습니다: 1. **Middleware 사용**: Redux에서 제공하는 Middleware 기능을 이용하여, 모든 Action이 Dispatch 될 때마다 Token의 유효성을 검사하고 재 갱신하는 작업을 수행할 수 있습니다. 2. **Polling**: 정해진 시간 간격으로 서버에 요청을 보내 토큰의 유효성을 검사하고 필요한 경우 재갱신하는 방법입니다. 하지만 이 방법은 반복적인 네트워크 요청으로 인해 성능상의 문제가 발생할 수 있습니다. 3. **WebSockets**: WebSocket 연결로 서버와 클라이양 사이에 오픈된 채널을 유지하며, 서버에서 클라이언트로 토큰 만료 알림을 보내주고 그에 따라 필요할 때 토큰을 갱신합니다. 4. **Service Workers**: 웹 브라우저가 백그라운드에서 실행하는 스크립트로서, Fetch 또는 Cache API를 사용하여 거의 모든 종류의 네트워크 요청과 응답상태를 관리하므로 JWT 갱신 등 많은 활동들에 대한 컨트롤이 가능합니다. 5. **Higher Order Component(HOC)**: HOC를 이용한 방법은 각 컴포넌트가 마운트되거나 업데이트될 때마다 토큰의 유효성을 검사하고 필요 시에 재갱신하는 작업을 수행합니다. 6. **Custom Hook**: 토큰 갱신 로직을 custom hook으로 만들어서 필요한 곳에서 사용하는 방법입니다. 진행하려는 프로젝트의 특성, 기존 구조 등을 고려하여 해당 환경에 가장 알맞은 방법을 선택하시면 됩니다.
지금 가입하면 모든 질문의 답변을 볼 수 있어요!