Axios는 JavaScript에서 널리 사용되는 HTTP 클라이언트 라이브러리입니다. 이 라이브러리를 사용하여 사용자 인증과 권한 부여를 처리하는 방법을 알아보겠습니다.

1. 사용자 인증 요청하기

사용자 인증을 위해 API에 사용자의 자격 증명(예: 사용자 이름과 비밀번호)을 보내야 합니다. 이를 위해 Axios의 post 메소드를 사용합니다.

axios.post('/login', {
  username: '사용자이름',
  password: '비밀번호'
})
.then(function (response) {
  // 인증 성공
  console.log(response.data);
})
.catch(function (error) {
  // 인증 실패
  console.error(error);
});

위 코드에서 /login은 인증을 처리하는 API 엔드포인트를 가리킵니다. username과 password는 사용자가 입력한 자격 증명 정보입니다. 요청이 성공하면 then 블록이 실행되고, 실패하면 catch 블록이 실행됩니다.

2. 인증 토큰 저장하기

인증이 성공하면 서버는 인증 토큰을 반환할 것입니다. 이 토큰은 이후의 API 요청에서 사용해야 합니다. 토큰을 저장하기 위해 일반적으로 웹 브라우저의 쿠키나 로컬 스토리지를 사용합니다.

axios.post('/login', {
  username: '사용자이름',
  password: '비밀번호'
})
.then(function (response) {
  // 인증 성공
  const token = response.data.token;
  
  // 토큰 저장
  localStorage.setItem('token', token);
})
.catch(function (error) {
  // 인증 실패
  console.error(error);
});

위 코드에서 response.data.token은 서버에서 반환된 토큰입니다. 이를 localStorage에 저장하여 나중에 사용할 수 있도록 합니다.

3. API 요청시 인증 헤더 추가하기

인증토큰을 저장한 후에는 이를 이용하여 API 요청에 인증 헤더를 추가해야 합니다. 이를 위해 Axios의 interceptors 기능을 사용하여 모든 요청에 자동으로 헤더를 추가할 수 있습니다.

axios.interceptors.request.use(function (config) {
  const token = localStorage.getItem('token');
  
  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
  }
  
  return config;
}, function (error) {
  return Promise.reject(error);
});

위 코드에서 localStorage.getItem('token')을 이용하여 저장한 토큰을 가져옵니다. 그 후, config.headers.Authorization에 토큰을 추가하여 헤더를 설정합니다. 이렇게하면 모든 요청에 인증 헤더가 자동으로 추가됩니다.

4. 권한 부여 처리하기

API 요청을 보낼 때, 서버는 허용된 사용자만 해당 API에 접근할 수 있도록 권한을 확인해야 합니다. 이를 위해 Axios의 response 인터셉터를 사용하여 응답을 확인하고 필요한 권한을 처리할 수 있습니다.

axios.interceptors.response.use(function (response) {
  // 응답 처리
  
  return response;
}, function (error) {
  // 오류 처리
  
  return Promise.reject(error);
});

위 코드에는 응답이 성공할 때 호출되는 then 블록과 오류가 발생할 때 호출되는 catch 블록이 포함되어 있습니다.

이제 응답을 확인하여 필요한 권한에 따라 처리하는 로직을 추가하면 됩니다. 예를들어, 권한 없음 오류가 발생하면 사용자에게 알림을 표시하거나, 다른 작업을 수행할 수 있습니다.

결론

Axios를 이용하여 사용자 인증과 권한 부여를 처리하는 방법을 알아보았습니다. 이를 활용하여 안전하고 보안된 웹 애플리케이션을 개발할 수 있습니다.