Section 22 리액트앱 인증 추가하기
TIL1) 내보내는 요청에 인증 토큰 첨부하기
API 요청을 보내는 모든 HTTP 요청에 인증 토큰을 포함해야 하는 상황이 자주 발생한다. 특히, 사용자 인증이 필요한 서비스에서는 클라이언트가 백엔드에 데이터를 요청할 때마다 토큰을 첨부하는 것이 필수적이다.
Authorization 헤더 사용하기:
Authorization 헤더에 Bearer 토큰을 추가하여 서버에 인증 요청을 보낸다.
const fetchData = async () => {
const token = localStorage.getItem('authToken'); // 저장된 토큰 불러오기
const response = await fetch('https://api.example.com/data', {
method: 'GET',
headers: {
'Authorization': `Bearer ${token}`, // 토큰 추가
},
});
const data = await response.json();
console.log(data);
};
토큰 저장 및 관리:
브라우저의 localStorage나 sessionStorage에 토큰을 저장한 후, 매 요청 시 해당 토큰을 꺼내 사용.
TIL2) loader()가 반드시 null 또는 기타 다른 값을 리턴
리액트의 라우터에서 사용되는 loader()는 서버 데이터를 가져와 라우트에서 바로 사용할 수 있게 도와줌. 이 함수는 반드시 값을 반환해야 하며, null 또는 실제 데이터를 반환할 수 있다.
export const loader = async () => {
const data = await fetch('https://api.example.com/data');
return data || null;
};값 반환의 중요성:
loader()는 데이터를 비동기로 받아와 리턴하기 때문에, 데이터가 없을 경우 null을 반환하도록 설정하는 것이 일반적이다.
데이터를 리턴하지 않으면 페이지가 예상대로 렌더링되지 않을 수 있다. 항상 null 또는 데이터를 반환하여 로딩 과정이 올바르게 처리되도록 한다.
TIL3) 토큰 만료 관리하기
토큰 기반 인증 시스템에서 중요한 것은 토큰의 만료를 적절히 관리하는 것. 토큰이 만료되면 사용자는 자동으로 로그아웃되거나 새 토큰을 발급한다.
- 토큰 만료 시간 확인:
일반적으로 JWT(Json Web Token) 같은 토큰에는 만료 시간(exp 필드)이 포함되어 있다.
const isTokenExpired = (token) => {
const { exp } = JSON.parse(atob(token.split('.')[1]));
const now = Math.floor(Date.now() / 1000);
return exp < now; // 현재 시간과 비교
};
- 만료된 토큰 처리:
만료된 토큰을 감지했을 경우, 로그아웃하거나 새 토큰을 요청하는 로직을 추가해야 한다.
if (isTokenExpired(token)) {
localStorage.removeItem('authToken');
alert('세션이 만료되었습니다. 다시 로그인해주세요.');
navigate('/login');
}
토큰 갱신:
만료된 토큰을 자동으로 갱신하기 위해 백엔드에서 리프레시 토큰 전략을 사용할 수 있다. 리프레시 토큰을 이용해 새로운 액세스 토큰을 발급받는 것이 일반적인 패턴이다.
Learned
이전에 진행했던 프로젝트에서 JWT(Json Web Token) 기반의 인증을 백엔드와 협업하며 구현했던 경험이 떠오른다. 당시, 프론트엔드에서 로그인 요청을 보내면 백엔드에서 JWT를 발급받아, 이후 API 요청마다 이 토큰을 활용해 인증을 처리했는데 강의를 보니 반갑?다.
질문거리
리프레시 토큰과 액세스 토큰:
리프레시 토큰을 사용하는 전략에서, 리프레시 토큰도 만료될 수 있는데, 리프레시 토큰이 만료된 경우 사용자에게 어떻게 대처하는 것이 좋을까요?
액세스 토큰과 리프레시 토큰의 만료 시간은 각각 어떻게 설정하는 것이 좋은지
OAuth와 JWT의 차이점:
OAuth 2.0 기반의 인증 시스템과 JWT 기반 인증 시스템의 주요 차이점
