feat: 5주차 두번째 미션

[kimdoyeon1234]

📚 주차 / 미션

• n주차 n번째 미션

---

📌 작업 내용

• 어떤 작업을 했는지 한 줄 요약

---

✨ 상세 작업 내용

---

📸 스크린샷

---

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

---

✅ 체크리스트

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

[yewon20804]

5주차 미션 2도 확인했습니다 ☺️ 토큰 재발급 인터셉터도 잘 작성해주셨는데 토큰 관리와 관련해서 수정이 필요한 부분 코멘트로 남겨두겠습니다 !

---

로그인할 때 refreshToken을 저장하지 않고있습니다

// 현재 코드 
if (response.data.status) {
  localStorage.setItem('accessToken', response.data.data.accessToken);
  alert(`${response.data.data.name}님 환영합니다!`);
  navigate('/mypage');
}

apis/axios.ts에 401 오류 발생 시 refreshToken으로 accessToken을 재발급하는 로직을 만들어주셨는데, 로그인할 때 refreshToken 자체를 저장하지 않으면 재발급 로직이 동작하지 않습니다!
localStorage.setItem('refreshToken', refreshToken);
이 줄을 추가해주시면 좋을 것 같습니다 !

---

MyPage.tsx에서 헤더를 수동으로 중복해서 붙이고 있습니다 !

현재 코드를 이렇게 작성해주셨는데

const response = await api.get('/users/me', {
  headers: {
    Authorization: Bearer ${token}
  }
});

apis/axios.ts에 api를 통한 모든 요청에 자동으로 Authorization 헤더가 붙도록 처리해주셨습니다!
그래서 헤더를 붙이지 않고 바로 호출해주셔도 가능합니다 !

api.interceptors.request.use((config) => {
  const token = localStorage.getItem('accessToken');
  if (token && config.headers) {
    config.headers.Authorization = `Bearer ${token}`; // 여기서 자동으로 붙여줌!
  }
  return config;
});

---

로그아웃할 때 refreshToken은 삭제하고 있지 않고 있습니다

const handleLogout = () => {
  localStorage.removeItem('accessToken'); // accessToken만 지움
  alert('로그아웃 되었습니다.');
  navigate('/login', { replace: true });
};

로그아웃을 하면 두 토큰 모두 localStorage에서 지워야 합니다!
localStorage.removeItem('refreshToken');
이 줄도 추가해주시면 좋을것 같아요

---

작성해드린 코멘트 확인 부탁드립니다 ㅎㅎ 👍☺️