Axios 인터셉터 #20

Open PromotezCitizen opened 1 month ago

In GitLab by @mumunuu on Oct 15, 2024, 10:32

정상: 마이페이지 조회 => JWT를 먼저 검사하고, 정상이면 => 마이페이지 조회하는 API 호출
로그아웃 케이스 : 마이페이지 조회 => JWT를 먼저 검사했는데, 만료됐어 (exp) => 리프레시 토큰 있어? => 없어 => 로그아웃

재발급 케이스 : 마이페이지 조회 => JWT를 먼저 검사했는데, 만료됐어 (exp)
=> 리프레시 토큰 있어 => 리프레시 API 호출 => 새로운 토큰을 받았어 => 내가 원래 하려던 마이페이지 조회

재발급 실패 케이스 : 마이페이지 조회 => JWT를 먼저 검사했는데, 만료됐어 (exp)
=> 리프레시 토큰 있어 => 리프레시 API 호출 => 새로운 토큰을 못 받았어 => 로그아웃 페이지로 이동

In GitLab by @mumunuu on Oct 15, 2024, 10:37

const axios = require('axios');
const jwtDecode = require('jwt-decode'); // JWT의 payload를 decode하기 위해 사용
const dayjs = require('dayjs'); // 날짜 비교를 위해 사용

// Access Token과 Refresh Token 관리용 예시 (보통은 쿠키나 로컬 스토리지 사용)
let accessToken = 'INITIAL_ACCESS_TOKEN'; 
let refreshToken = 'INITIAL_REFRESH_TOKEN';

// Axios 인스턴스 생성
const apiClient = axios.create({
  baseURL: 'https://your-api.com',
  headers: {
    Authorization: `Bearer ${accessToken}`,
  },
});

// Refresh Token을 사용해 새로운 Access Token 발급 요청
const refreshAccessToken = async () => {
  try {
    const response = await axios.post('https://your-api.com/auth/refresh', {
      token: refreshToken,
    });

    accessToken = response.data.accessToken; // 새 Access Token 갱신
    refreshToken = response.data.refreshToken; // 필요 시 Refresh Token도 갱신

    return accessToken;
  } catch (error) {
    console.error('Refresh token expired or invalid:', error);
    throw error;
  }
};

// Axios 요청 전 인터셉터 설정
apiClient.interceptors.request.use(async (config) => {
  const decoded = jwtDecode(accessToken);
  const isExpired = dayjs.unix(decoded.exp).isBefore(dayjs());

  if (!isExpired) {
    config.headers.Authorization = `Bearer ${accessToken}`;
    return config; // 토큰이 만료되지 않았다면 원래 요청 수행
  }

  // 토큰이 만료되었을 경우 새 토큰을 받아 요청 재시도
  try {
    const newAccessToken = await refreshAccessToken();
    config.headers.Authorization = `Bearer ${newAccessToken}`;
  } catch (error) {
    return Promise.reject(error); // 리프레시 토큰도 만료된 경우 에러 반환
  }

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

// 예시: API 호출
apiClient.get('/protected-route')
  .then(response => console.log(response.data))
  .catch(error => console.error(error));

In GitLab by @mumunuu on Oct 15, 2024, 10:42

JPA 연관관계 => 중요하다! 진짜진짜 중요하다 부모가 리스트? 자식은 단일 객체?

양방향 설정, 단방향 비즈로직에 따라서 설정... 꼭 거는거 아니다!

user //가입일

user_profile //nickname user_id 연관관계의 ...?

Elice-Track-Cloud-4-HanSH / buy-gurus-back

Axios 인터셉터 #20