오류 코드
if(msg == "Expired Access Token. 토큰이 만료되었습니다.") {
console.log("토큰 재발급 요청");
await axios.post(
`${import.meta.env.VITE_APP_GENERATED_SERVER_URL}/api/token/reissue`,{},
// accesstoken 수정
{headers: {
Authorization: localStorage.getItem("Authorization"),
refreshToken: localStorage.getItem("Refresh"),
}},
)흐름 간략 설명
로그인 요청 응답으로 백엔드로 부터 헤더에 키 값이 authorization, refresh인 토큰을 받는다.
이 토큰을 로컬스토리지에 각각 키값이 Authorization, Refresh로 저장한다. 액세스토큰이 만료되었을때 이 두 개의 데이터와 같이 다시 요청을 보내고 토큰 만료 여부를 확인하고 리프레쉬 토큰을 재발급 받는다. 일정 시간이 지나면 리프레쉬 토큰도 만료가 된다. 이때 이전 토큰은 삭제하고 재발급된 토큰 값을 저장한다.
트러블슈팅
-
만료된 토큰 확인 방법을 몰라서 작성한 코드 실행하는 법을 몰랐다...
( 토큰 갱신과 리프레시 토큰에 대한 개념이 부족했다. 그래서 글로 정리했다. )
( React와 Axios로 구현하는 효율적인 인증 시스템: 액세스 & 리프레시 토큰 자동 갱신 )
‣ 리프레쉬 확인하는 방법
인증이 필요한 요청을 보낸다 → 로그인 한 유저만 사용 가능한 작업을 실행할 때 로그인 만료 여부를 판단하기 시작한다. -
액세트 토큰 만료시 401에러가 발생하는데 새로운 토큰 요청이 들어가지 않고 401 무한 요청 에러 발생
- 원인
액세스 토큰 재발급 요청이 적절하지 않아(조건이 충족되지 않아) 요청 구문이 실행되지 않고 401에러만 무한히 발생한 것이다.
이는 refreshToken을 프론트에서 보내지 못하거나 백엔드에서 refreshToken을 받지 못하는 것으로 보인다.
프론트에서 로그인 했을 때 response.headers에서 authorization은 출력이 되지만 refresh는 출력이 되지 않고 있다. (하나의 값만 저장되고 있는 상황)
담당 백엔드에게 물어보니...
백엔드에서 헤더로 authorization과 refresh 토큰 값을 보내고 있다고 한다. 그렇다면 프론트에서 refresh를 제대로 받지 못하고 있는 것이다.
해결 - 코드 일부 수정
- 대소문자 확인
백엔드에서 요청한 데이터 대소문자 잘 확인해서 보내기
변경전 refreshToken: localStorage.getItem("Refresh"),
변경후 RefreshToken: localStorage.getItem("Refresh"),
- 받아오는 데이터 위치 명확히 표시
로그인 성공시 로컬스토리지에 토큰 저정할 때
변경 전 response.data.authorization
변경 후 response.headers.authorization
토큰 재발급 요청 후 갱신된 토큰 저장 경로
변경전 localStorage.setItem("authorization", res.data.authorization);
변경후 localStorage.setItem("authorization", res.headers.authorization);
- 요청마다 받오는 데이터의 위치가 달라 console로 확인하며 위치를 수정하였다
- 문법 수정
변경전
Authorization: localStorage.getItem("Authorization"),
refreshToken: localStorage.getItem("Refresh"),변경후
Authorization: `${localStorage.getItem('Authorization')}`,
Refresh: `${localStorage.getItem('Refresh')}`,수정한 코드
if(msg == "Expired Access Token. 토큰이 만료되었습니다.") {
console.log("토큰 재발급 요청");
await axios.post(
`${import.meta.env.VITE_APP_GENERATED_SERVER_URL}/api/token/reissue`,{},
{headers: {
Authorization: `${localStorage.getItem('Authorization')}`,
Refresh: `${localStorage.getItem('Refresh')}`,
}},
)로직은 다 세워놓고 데이터를 어디에 담아서 보낼지 받아온 데이터를 어디에 저장했는지 관리가 잘 되지 않아 발생한 문제이다...
다음에는 백에게 데이터를 어디에 담아 보내야 하는지 갱신된 토큰을 어디에 담아 줬는지에 대해 명확히 확인하고 코드를 작성하여 이번 같은 실수를 반복하지 않도록 하자!!
