자바스크립트 fetch API를 사용한 인증과 권한 관리

10 Sep 2023

javascript

Web 애플리케이션에서 사용자의 인증과 권한 관리는 중요한 부분입니다. 이를 효과적으로 다루기 위해 자바스크립트 fetch API를 사용할 수 있습니다. fetch API는 네트워크 요청을 보내고 응답을 받는 기능을 제공하며, 사용자의 인증과 권한 관리를 구현하는 데 매우 유용합니다.

1. 인증 처리

사용자의 인증은 주로 토큰 기반 인증 방식을 사용합니다. 토큰 기반 인증에서는 사용자가 로그인을 하면 서버에서 액세스 토큰을 발급해줍니다. 이후 사용자의 요청마다 액세스 토큰을 함께 전송하고, 서버는 해당 토큰을 검증하여 사용자를 인증합니다.

예제 코드

// 로그인 요청
fetch('/api/login', {
  method: 'POST',
  body: JSON.stringify({ username, password }),
  headers: { 'Content-Type': 'application/json' }
})
.then(response => response.json())
.then(data => {
  const accessToken = data.accessToken;
  // 액세스 토큰을 로컬 스토리지에 저장
  localStorage.setItem('accessToken', accessToken);
});

// 인증이 필요한 요청
fetch('/api/protected', {
  headers: { Authorization: 'Bearer ' + localStorage.getItem('accessToken') }
})
.then(response => {
  if (response.ok) {
    // 인증 성공
    return response.json();
  } else {
    // 인증 실패
    throw new Error('Unauthorized');
  }
})
.then(data => {
  // 인증에 성공한 경우 데이터 처리
})
.catch(error => {
  // 인증에 실패한 경우 에러 처리
});

위의 예제 코드에서는 먼저 /api/login 엔드포인트로 로그인 요청을 보내고, 서버로부터 발급받은 액세스 토큰을 로컬 스토리지에 저장합니다. 그 후, 액세스 토큰을 사용하여 /api/protected 엔드포인트로 인증이 필요한 요청을 보냅니다. 이때 요청 헤더에 Authorization 필드를 추가하여 액세스 토큰을 전송합니다. 서버는 헤더에서 액세스 토큰을 추출하여 인증 여부를 검증합니다.

2. 권한 관리

권한은 사용자가 특정 작업을 수행할 수 있는 권리를 의미합니다. 보통 권한은 로그인 후에 서버로부터 받아온 권한 정보를 기반으로 관리됩니다. 자바스크립트 fetch API를 사용하여 권한 관리를 구현하기 위해서는 서버로부터 받아온 권한 정보를 클라이언트에 저장하고, 필요한 작업 수행 전에 해당 권한이 있는지 검사해야 합니다.

예제 코드

// 로그인 후 권한 정보 저장
fetch('/api/login', {
  method: 'POST',
  body: JSON.stringify({ username, password }),
  headers: { 'Content-Type': 'application/json' }
})
.then(response => response.json())
.then(data => {
  const accessToken = data.accessToken;
  const permissions = data.permissions;
  // 액세스 토큰과 권한 정보를 로컬 스토리지에 저장
  localStorage.setItem('accessToken', accessToken);
  localStorage.setItem('permissions', JSON.stringify(permissions));
});

// 권한 검사
function hasPermission(permission) {
  const permissions = JSON.parse(localStorage.getItem('permissions'));
  return permissions.includes(permission);
}

// 권한이 필요한 작업 수행
if (hasPermission('write')) {
  fetch('/api/write', {
    method: 'POST',
    body: JSON.stringify({ data }),
    headers: {
      'Content-Type': 'application/json',
      Authorization: 'Bearer ' + localStorage.getItem('accessToken')
    }
  })
  .then(response => {
    if (response.ok) {
      // 작업 성공
      return response.json();
    } else {
      // 작업 실패
      throw new Error('Permission denied');
    }
  })
  .then(data => {
    // 작업에 성공한 경우 데이터 처리
  })
  .catch(error => {
    // 작업에 실패한 경우 에러 처리
  });
}

위의 예제 코드에서는 /api/login 엔드포인트로 로그인 요청을 보내고, 서버로부터 받아온 권한 정보를 로컬 스토리지에 저장합니다. 이후 hasPermission 함수를 사용하여 필요한 작업에 대한 권한을 검사합니다. 권한이 있는 경우에만 해당 작업을 수행하며, 작업이 필요한 엔드포인트로는 액세스 토큰과 함께 권한 검사를 수행하는 인증 과정을 거쳐 요청을 보냅니다.

자바스크립트 fetch API를 사용한 인증과 권한 관리는 서버와 클라이언트 사이의 효율적인 통신을 가능하게 해주며, 사용자의 보안과 웹 애플리케이션의 안정성을 높일 수 있습니다. 이를 통해 사용자에게 더 나은 경험과 안전한 서비스를 제공할 수 있습니다.