Week5/sori m2

[soyun0318]

📚 주차 / 미션

• n주차 n번째 미션

---

📌 작업 내용

• Refresh Token을 활용하여 지속적인 로그인 유지하기

---

✨ 상세 작업 내용

---

📸 스크린샷

---

❓ 리뷰어가 알아야 할 사항 / 질문

---

✅ 체크리스트

• 기능 정상 작동 확인
• 불필요한 주석 삭제
• 해당 주차 키워드 내용 이해

[yewon20804]

5주차 미션2도 수고하셨습니다 ! 이번에는 Refresh Token 자동 갱신 로직을 진행하셨는데요 !
코멘트 내용 확인 부탁드립니다 👍

---

초기 로드 시 Bearer null 헤더 문제

// 현재
axiosInstance.defaults.headers.common["Authorization"] =
    `Bearer ${localStorage.getItem(LOCAL_STORAGE_KEY.accessToken)}`;

토큰이 없을 경우 Bearer null이 헤더에 포함될 수 있어, 토큰이 있을 때만 설정하도록 조건을 추가하는 것이 좋을 것 같습니다 !

// 개선
const savedToken = localStorage.getItem(LOCAL_STORAGE_KEY.accessToken);
if (savedToken) {
    axiosInstance.defaults.headers.common["Authorization"] = `Bearer ${savedToken}`;
}

---

Refresh 성공 후 AuthContext 동기화 문제

// 현재 
axiosInstance.defaults.headers.common["Authorization"] = `Bearer ${newAccessToken}`;

현재는 Refresh 성공 후 axiosInstance 헤더와 localStorage는 갱신되지만, AuthContext의 accessToken state는 이전 값이 그대로인 상태입니다 ! ProtectedLayout이 이 state를 기준으로 라우팅을 판단하기 때문에, 토큰이 살아있는데도 로그인 페이로 이동하는 상황이 발생할 수 있습니다 !

인터셉터를 AuthContext 안의 useEffect로 옮기면 setAccessToken을 함께 호출하여 동기화하는 방향을 찾아보면 좋을 것 같습니다 ☺️