Access Token, Refresh Token 에 대해

oversleep·2025년 2월 5일
post-thumbnail

Access Token:

  • 호텔 객실 카드키와 같음
  • 단기간(보통 몇 시간)만 사용 가능
  • API 요청할 때마다 사용
  • 탈취되어도 짧은 시간만 유효해서 상대적으로 안전
  1. 발급 과정:
// 1. 사용자가 로그인
const login = async (email, password) => {
  const response = await axios.post('/login', {
    email: email,
    password: password
  });
  
  // 2. 서버가 accessToken, refreshToken 발급
  const { accessToken, refreshToken } = response.data;
  
  // 3. 토큰 저장
  await AsyncStorage.setItem('accessToken', accessToken);
  await AsyncStorage.setItem('refreshToken', refreshToken);
}
  1. 사용 방법:
// API 요청할 때 토큰 사용
const fetchData = async () => {
  const token = await AsyncStorage.getItem('accessToken');
  
  const response = await axios.get('/api/data', {
    headers: {
      Authorization: `Bearer ${token}`
    }
  });
}

Refresh Token:

  • 호텔 예약 확인증과 같음
  • 장기간(보통 몇 주~몇 달) 사용 가능
  • Access Token이 만료되었을 때만 사용
  • 새로운 Access Token을 발급받는 용도
  1. 발급 과정:
// 위의 login 함수에서 이미 저장됨
await AsyncStorage.setItem('refreshToken', refreshToken);
  1. 사용 방법:
// Access Token이 만료되었을 때 Refresh Token으로 새로 발급
const refreshAccessToken = async () => {
  try {
    const refreshToken = await AsyncStorage.getItem('refreshToken');
    
    const response = await axios.post('/api/refresh', {
      refreshToken: refreshToken
    });
    
    const newAccessToken = response.data.accessToken;
    await AsyncStorage.setItem('accessToken', newAccessToken);
    
    return newAccessToken;
  } catch (error) {
    // Refresh Token이 만료되었다면 다시 로그인
    if (error.response?.status === 401) {
      await AsyncStorage.multiRemove(['accessToken', 'refreshToken']);
      // 로그인 페이지로 이동
    }
    throw error;
  }
};

// 실제 사용 예시 (axios interceptor)
axiosInstance.interceptors.response.use(
  (response) => response,
  async (error) => {
    const originalRequest = error.config;
    
    // Access Token이 만료되었고, 재시도하지 않았다면
    if (error.response?.status === 401 && !originalRequest._retry) {
      originalRequest._retry = true;
      
      // Refresh Token으로 새 Access Token 발급
      const newAccessToken = await refreshAccessToken();
      
      // 새 토큰으로 원래 요청 재시도
      originalRequest.headers['Authorization'] = `Bearer ${newAccessToken}`;
      return axiosInstance(originalRequest);
    }
    
    return Promise.reject(error);
  }
);

작동 과정:
1. 로그인 성공 → Access Token + Refresh Token 받음
2. API 요청할 때 Access Token 사용
3. Access Token 만료 → Refresh Token으로 새로운 Access Token 발급
4. Refresh Token도 만료 → 다시 로그인 필요

실생활 비유:

  • Access Token = 호텔 카드키
    • 체크인(로그인)하면 받음
    • 방에 들어갈 때마다(API 요청) 사용
    • 일정 기간 후 사용 불가
    • 잃어버리면(탈취) 위험
  • Refresh Token = 호텔 예약 확인증
    • 카드키 재발급 받을 때 필요
    • 더 오래 유효함
    • 분실 시 더 위험

이렇게 이중으로 토큰을 관리하면 보안성이 높아짐!

profile
궁금한 것, 했던 것, 시행착오 그리고 기억하고 싶은 것들을 기록합니다.

0개의 댓글