[typescript] 타입스크립트에서 REST API 호출 시 토큰 갱신 방법

12 Dec 2023

typescript

많은 웹 애플리케이션에서는 보안을 위해 REST API 요청에 인증 토큰을 사용합니다. 하지만 토큰은 유효 기간이 있기 때문에, 갱신이 필요할 수 있습니다. 이 글에서는 타입스크립트를 사용하여 REST API를 호출하고, 토큰을 갱신하는 방법에 대해 다루겠습니다.

1. 토큰 관리를 위한 모듈 설치

먼저, 토큰을 관리하기 위해 axios와 jsonwebtoken과 같은 모듈을 설치해야 합니다. 이 모듈들을 사용하여 REST API 호출 및 토큰 갱신을 관리할 수 있습니다.

npm install axios jsonwebtoken

2. 토큰 갱신 로직 구현

토큰을 갱신하는 로직은 보통 다음과 같은 순서로 이루어집니다.

2.1. 기존 토큰의 만료 여부 확인

REST API를 호출하기 전에, 기존 토큰의 만료 여부를 확인합니다.

import jwt_decode from 'jsonwebtoken/decode';

function isTokenExpired(token: string): boolean {
  const decodedToken = jwt_decode(token) as { exp: number };
  const expirationTime = decodedToken.exp * 1000;
  return Date.now() >= expirationTime;
}

2.2. 토큰 갱신 요청

기존 토큰이 만료되었을 경우, 서버에 새로운 토큰을 요청합니다.

import axios, { AxiosResponse } from 'axios';

async function refreshAccessToken(refreshToken: string): Promise<string> {
  const response: AxiosResponse<{ accessToken: string }> = await axios.post('/refresh-token', { refreshToken });
  return response.data.accessToken;
}

2.3. API 호출 시 토큰 갱신

실제 API 호출 시, 토큰을 갱신하여 사용합니다.

let accessToken = 'example_access_token';

async function makeApiCall() {
  if (isTokenExpired(accessToken)) {
    const refreshToken = 'example_refresh_token';
    accessToken = await refreshAccessToken(refreshToken);
  }
  
  // 갱신된 토큰을 사용하여 API 호출
  try {
    const response = await axios.get('/api', { headers: { Authorization: `Bearer ${accessToken}` } });
    console.log(response.data);
  } catch (error) {
    console.error(error);
  }
}

3. 결론

이렇게 타입스크립트를 사용하여 REST API 호출 시 토큰을 갱신할 수 있습니다. 토큰 관리는 애플리케이션의 보안을 유지하기 위해 매우 중요하므로, 신중하게 구현해야 합니다.

많은 경우, 토큰 관리를 위한 라이브러리나 프레임워크를 사용하기도 합니다. 하지만 기본적인 토큰 갱신 로직을 이해하고 구현하는 것은 개발 과정에서 유용할 수 있습니다.