ReadRiddle 개발기 - 8

Fully Whole JWT 로그인

Backend (60분 주기의 JWT AccessToken)

SIMPLE_JWT = {
    "ACCESS_TOKEN_LIFETIME": timedelta(minutes=60),

---

Frontend (자동으로 refreshToken 갱신하도록)

여기에서 핵심은

• 로그인할 때마다는 타이머로 사용할 로그인 TimeStamp를 찍고
• 해당 타임스탬프가 백엔드의 원본 JWT 시간 이내에 주기 갱신 요청을 보내 동작이 있으면 자동으로 accessToken을 갱신하도록 해준다는 것임

Login.js

      localStorage.setItem("lastLoggedInAt", JSON.stringify(new Date()));

AuthContext.js

 // 30분 기준 갱신 로직
      const lastLoggedInAt = JSON.parse(localStorage.getItem("lastLoggedInAt"));
      const now = new Date();
      const fiftyNineMinutesLater = new Date(lastLoggedInAt).getTime() + 30 * 60 * 1000;

      if (now.getTime() >= fiftyNineMinutesLater && lastLoggedInAt) {
        // 30분 이후: Access Token 갱신
        await refreshAccessToken(accessToken);
      } else {
        // 30분 이전: 기존 로직 유지
        if (accessToken) {
          apiRequest.interceptors.request.use(
            (config) => {
              config.headers["Authorization"] = `Bearer ${accessToken}`;
              return config;
            },
            (error) => Promise.reject(error)
          );