[멀티캠퍼스] 풀스택 개발자 아카데미 (29) - Spring Boot & JWT (2)

@Entity
@Getter
@NoArgsConstructor(access = AccessLevel.PROTECTED)
public class RefreshToken {
    @Id
    @Column(name = "rt_key")
    private String key; // 사용자 ID

    @Column(name = "rt_value")
    private String value; // Refresh Token 값

    @Builder
    public RefreshToken(String key, String value) {
        this.key = key;
        this.value = value;
    }

    public RefreshToken updateValue(String token) {
        this.value = token;
        return this;
    }
}

// AuthService.java
@Transactional
public TokenDto reissue(TokenRequestDto tokenRequestDto) {
    // 1. Refresh Token 검증
    if (!jwtTokenProvider.validateToken(tokenRequestDto.getRefreshToken())) {
        throw new RuntimeException("Refresh Token 이 유효하지 않습니다.");
    }

    // 2. Access Token 에서 User ID 가져오기
    Authentication authentication = jwtTokenProvider.getAuthentication(tokenRequestDto.getAccessToken());

    // 3. 저장소에서 User ID 를 기반으로 Refresh Token 값 가져옴
    RefreshToken refreshToken = refreshTokenRepository.findByKey(authentication.getName())
            .orElseThrow(() -> new RuntimeException("로그아웃 된 사용자입니다."));

    // 4. Refresh Token 일치하는지 검사
    if (!refreshToken.getValue().equals(tokenRequestDto.getRefreshToken())) {
        throw new RuntimeException("토큰의 유저 정보가 일치하지 않습니다.");
    }

    // 5. 새로운 토큰 생성
    TokenDto tokenDto = jwtTokenProvider.generateTokenDto(authentication);

    // 6. 저장소 정보 업데이트
    RefreshToken newRefreshToken = refreshToken.updateValue(tokenDto.getRefreshToken());
    refreshTokenRepository.save(newRefreshToken);

    // 토큰 발급
    return tokenDto;
}

@PostMapping("/token/refresh")
public ResponseEntity<TokenDto> reissue(@RequestBody TokenRequestDto tokenRequestDto) {
    return ResponseEntity.ok(authService.reissue(tokenRequestDto));
}

// src/api/axiosInstance.js
import axios from "axios";

// 환경변수에서 API 기본 URL 가져오기 없으면 로컬호스트 사용
const API_BASE_URL = import.meta.env.VITE_API_BASE_URL || "http://localhost:8080";

const axiosInstance = axios.create({
  baseURL: `${API_BASE_URL}/api`,
  headers: {
    "Content-Type": "application/json",
  },
});

export default client;

axiosInstance.interceptors.request.use(
  (config) => {
    const { accessToken } = store.getState().auth;
    // const token = null; // 임시로 토큰을 가져오는 부분을 비워둠

    if (accessToken) {
      config.headers.Authorization = `Bearer ${accessToken}`;
    }

    return config;
  },
  (err) => {
    return Promise.reject(err);
  }
);

axiosInstance.interceptors.response.use(
  (resp) => {
    return resp;
  },
  async (err) => {
    const originalRequest = err.config;
    if (err.response) {
      // 403 Forbidden 공통 처리 예시
      if (err.response.status === 403 && !originalRequest._retry) {
        originalRequest._retry = true;

        try {
          const refreshToken = localStorage.getItem("refreshToken");

          if (!refreshToken) {
            store.dispatch(logout());
            return Promise.reject(err);
          }

          const resp = await axios.post(`${API_BASE_URL}/api/v1/token/refresh`, {
            refreshToken: refreshToken,
          });

          const { accessToken, refreshToken: newRefreshToken } = resp.data;

          store.dispatch(
            tokenRefresh({
              accessToken: accessToken,
              refreshToken: newRefreshToken,
            })
          );

          if (newRefreshToken) {
            localStorage.setItem("refreshToken", newRefreshToken);
          }

          originalRequest.headers.Authorization = `Bearer ${accessToken}`;
          return axiosInstance(originalRequest);
        } catch (err) {
          store.dispatch(logout());
          toast.error("세션이 만료되었습니다. 다시 로그인해주세요.");
          window.location.href = "/login";
          return Promise.reject(err);
        }
      }
      // ... 다른 상태 코드에 대한 공통 처리 추가 가능
      return Promise.reject(err.response.data);
    }
    return Promise.reject(err);
  }
);

// src/store/authSlice.js
import { createSlice, createAsyncThunk } from "@reduxjs/toolkit";
import axiosInstance from "../api/axiosConfig";

export const loginUser = createAsyncThunk(
  "auth/loginUser",
  async (loginData, { rejectWithValue }) => {
    try {
      const response = await client.post("/auth/login", loginData);
      // 로컬 스토리지 저장
      localStorage.setItem("accessToken", response.data.accessToken);
      localStorage.setItem("refreshToken", response.data.refreshToken);
      return response.data;
    } catch (error) {
      return rejectWithValue(error.response.data);
    }
  }
);
// ... Slice 로직 생략