인프런 커뮤니티 질문&답변
jwtUtil.js의 beforeRes에서 accessToken을 refresh 했을 경우
작성
·
95
0
안녕하세요, 강의 잘 듣고 있습니다.
jwtUtil.js 의 beforeRes 함수에서 아래 코드 관련 문의사항이 있습니다.
// "ERROR_ACCESS_TOKEN" => JWTCheckFilter에서 어떠한 이유에서든 오류가 발생 시
if (data && data.error === 'ERROR_ACCESS_TOKEN') {
const memberCookieValue = getCookie("member");
const result = await refreshJWT(memberCookieValue.accessToken, memberCookieValue.refreshToken);
console.log("refreshJWT RESULT", result);
memberCookieValue.accessToken = result.accessToken;
memberCookieValue.refreshToken = result.refreshToken;
setCookie("member", JSON.stringify(memberCookieValue), 1);
// 원래의 호출
const originalRequest = res.config;
originalRequest.headers.Authorization = `Bearer ${result.accessToken}`;
return await axios(originalRequest);
}위 코드를 보면, accessToken (또는 refreshToken이 같이) 새로 발급된 후, setCookie 함수로 cookie에는 새롭게 갱신된 accessToken/refreshToken을 저장하고 있지만, redux store에는 갱신된 token 정보들을 업데이트 하지 않고 있는 것 같습니다. (loginSlice의 reducer를 호출하지 않고 있네요...)
혹시 redux store에도 새롭게 refresh된 token들을 저장하고 싶다면, 어느 부분에서 처리해야 할까요?
감사합니다.
답변 1
1
앱의 상태 -> 쿠키로 전달하는 것은 RTK로 상태 변경이 앱에서 이루어지므로 간단합니다.
반대로 브라우저나 쿠키 -> 앱의 상태로 반영하는 것은 RTK의 문제가 아니기 때문에 앱에 상태가 변경된 사실을 알려줄 수 있는 확실한 수단이 존재하지는 않습니다.
다만 이런 경우엔 다음과 같은 방식을 이용해서 구현할 수 있습니다.
1. 앱에서 주기적인 쿠키와 상태 확인(interval) - 성능면으로 권장할만한 방식은 아니라고 생각합니다.
2. Refresh Token가 되었을때 강제적으로 브라우저의 이벤트를 발생하는 방법 - 이 역시 깔끔하지 않긴 합니다. - 사일런트 리프레시라는 이름이 무색해 집니다.
3. 로그인 시에 Refresh Token 작업이 일어나면 동작하는 콜백함수를 전달하는 방식
3번 방식은
예를 들어 LoginComponent에서 사용자가 로그인 시에 jwtUtil에 새로운 속성으로 RefreshToken 처리가 되었을 때 동작해야 하는 코드를 콜백 함수로 만들어서 추가하는 방식입니다.
이 때 작성하는 콜백 함수는 컴포넌트 내부이기 때문에 RTK를 사용할 수 있습니다.
jwtUtil에서는 토큰이 갱신 된 후에 지정된 콜백함수를 호출할 수 있습니다.






답변 감사합니다!