백엔드 API에서 받아온 JWT 토큰으로 ReactJS에서 “기억하기” 기능 구현하기
ReactJS에서 인증 시스템을 구축할 때, 사용자의 자격 증명을 보호하면서도 원활한 사용자 경험을 제공하는 것이 중요합니다. 사용자 경험을 향상시키는 기능 중 하나는 “기억하기” 기능입니다. 이 기능은 사용자가 애플리케이션을 닫고 다시 열어도 로그인 상태를 유지할 수 있게 합니다. 이 튜토리얼에서는 백엔드 API에서 받은 JWT 토큰을 사용하여 ReactJS에서 “기억하기” 기능을 구현하는 방법을 알아보겠습니다.
단계 1: JWT 토큰에 만료 시간 설정하기
구현에 들어가기 전에, JWT 토큰의 만료 시간 개념을 이해해야 합니다. 만료 시간을 설정함으로써 토큰의 유효기간을 제어할 수 있습니다. 토큰이 만료되면 사용자가 자동으로 로그아웃되어 계정의 보안을 유지합니다.
이 기능을 구현하기 위해, JWT 토큰과 함께 만료 시간을 key-value 쌍으로 localStorage에 저장할 수 있습니다. 다음은 구현 방법의 예시입니다:
function setTokenWithExpiry(key, value, expiration) {
const now = new Date();
const item = {
value: value,
expiry: now.getTime() + expiration
};
localStorage.setItem(key, JSON.stringify(item));
}
이 함수는 세 개의 매개변수를 받습니다: localStorage에서 토큰을 식별할 키, 토큰 값 자체, 그리고 만료 시간(밀리초)입니다. 현재 시간을 가져와 만료 시간을 더하여 만료 타임스탬프를 생성합니다. 토큰과 만료 타임스탬프를 객체로 저장함으로써 나중에 간편하게 검색하고 비교할 수 있습니다.
단계 2: JWT 토큰을 로컬 스토리지에 저장하기
이제 토큰이 만료되었을 때 사용자를 자동으로 로그아웃하려면, 로컬 스토리지에 토큰을 저장하는 방법에 집중해야 합니다. 이 단계에서는 사용자가 “기억하기” 옵션을 선택했을 때에만 토큰을 저장하도록 구현합니다. 사용자가 이 옵션을 선택하지 않은 경우에는 sessionStorage를 사용합니다.
다음은 코드 예시입니다:
const login = (token, rememberMe = false) => {
if (rememberMe) {
localStorage.setItem('token', token);
} else {
sessionStorage.setItem('token', token);
}
// 추가적인 로그인 로직 여기에 작성
};
이 코드 스니펫에서는 토큰과 사용자가 “기억하기” 옵션을 선택했는지를 나타내는 부울 플래그를 인수로 받는 login 함수가 있습니다. 플래그가 true인 경우 토큰을 localStorage에 저장하고, 그렇지 않은 경우 sessionStorage에 저장합니다.
단계 3: 로그인 및 로그아웃 처리하기
로그인 및 로그아웃 동작을 처리하기 위해, 애플리케이션을 시작할 때 토큰의 유효성을 확인하고 토큰이 만료되었을 때 사용자를 자동으로 로그아웃하는 메커니즘을 구현해야 합니다. useEffect 훅을 사용하여 이를 구현할 수 있습니다.
useEffect(() => {
const token = localStorage.getItem('token');
const expiry = localStorage.getItem('expiry');
if (token && expiry) {
const currentTimestamp = new Date().getTime();
if (currentTimestamp > expiry) {
// 토큰이 만료됨, 사용자 로그아웃 처리
localStorage.removeItem('token');
localStorage.removeItem('expiry');
} else {
// 토큰이 유효함, 로그인 로직 수행
// 추가적인 로그인 로직 여기에 작성
}
} else {
// 사용자가 로그인하지 않은 상태
}
}, []);
이 코드 스니펫에서는 localStorage에서 토큰과 만료 타임스탬프를 가져옵니다. 값이 모두 존재하는 경우 현재 타임스탬프와 만료 타임스탬프를 비교합니다. 현재 타임스탬프가 만료 타임스탬프보다 큰 경우 토큰이 만료되었으므로 localStorage에서 토큰과 만료 타임스탬프를 모두 제거하여 사용자를 로그아웃 처리합니다.
토큰이 아직 유효한 경우 추가적인 로그인 로직을 수행할 수 있으며, 사용자를 인증된 상태로 설정하고 적절한 페이지로 리디렉션할 수 있습니다.
결론
백엔드 API에서 받은 JWT 토큰을 사용하여 ReactJS에서 “기억하기” 기능을 구현함으로써 사용자 경험을 향상시킬 수 있습니다. 이 튜토리얼에서는 JWT 토큰에 만료 시간을 설정하는 방법, 사용자 선택에 따라 localStorage 또는 sessionStorage에 토큰을 저장하는 방법, 로그인 을 사용할 수 있습니다.
reference :
