JWT Refresh Token을 활용한 로그인 유지 기능

위리브 프로젝트 - JWT Refresh Token을 활용한 로그인 유지 기능

• 이전 글에서 JWT 기반 로그인 기능 구현 이후 리프레시 토큰을 활용한 로그인 유지 기능 구현했던 작업에 대해 정리합니다.

• 전체 인증 흐름
  1. 로그인 요청
  2. 서버에서 Access + Refresh Token 발급
  3. 둘 다 httpOnly 쿠키에 저장
  4. Access Token 만료 시 Refresh Token으로 Access Token 재요청
  5. Access Token 재발급 후 자동 로그인 유지

• 구현 방식

1. 로그인 시 토큰 저장
2. API 요청 시 Access Token 만료 확인

   axios.interceptors.response.use(
     (res) => res,
     async (err) => {
       if (err.response.status === 401) {
         try {
           // AccessToken이 만료되었을 경우 RefreshToken으로 재발급 요청
           await axios.post("/auth/refresh", null, { withCredentials: true });
   
           // 재시도
           return axios(err.config);
         } catch (e) {
           // 재발급 실패 → 로그아웃 처리
           router.push("/login");
           return Promise.reject(e);
         }
       }
       return Promise.reject(err);
     }
   );

3. 서버에서 Refresh Token 처리