React.js에서 한 탭이 로그아웃 될 때 모든 탭이 자동으로 로그아웃되는 방법 (Redux 없이)

React.js에서 한 탭에서 로그아웃하면 모든 탭에서 로그아웃하는 방법

React.js를 사용하고 한 탭에서 로그아웃하면 브라우저의 모든 탭에서 로그아웃하는 자동 로그아웃 기능을 구현하려면 아래 단계를 따를 수 있습니다. 이 솔루션은 Redux에 의존하지 않으며 React의 내장 훅과 로컬 스토리지를 사용합니다.

단계 1: 이벤트 리스너 추가하기

먼저, 로컬 스토리지에 저장된 JWT 토큰의 변경사항을 추적하기 위해 이벤트 리스너를 추가해야 합니다. 이를 통해 탭이 로그아웃되었을 때 로그아웃 기능을 감지하고 트리거할 수 있습니다.

useEffect(() => {
  const handleInvalidToken = (e) => {
    if (e.key === 'accessToken' && e.oldValue && !e.newValue) {
      // 로그아웃 로직 작성
      logout();
    }
  };

  window.addEventListener('storage', handleInvalidToken);

  return function cleanup() {
    window.removeEventListener('storage', handleInvalidToken);
  };
}, [logout]);

단계 2: 로그아웃 기능 구현하기

다음으로, 한 탭이 로그아웃되면 트리거되는 로그아웃 기능을 구현해야 합니다. 이를 위해 Redux 액션이나 사용자 정의 함수를 사용할 수 있습니다. 다음은 Redux 액션의 예시입니다:

export const logoutAction = (history) => (dispatch) => {
  dispatch({ type: LOGOUT });
  history.push('/signin');
};

단계 3: 로그아웃 리듀서 업데이트하기

로그아웃 리듀서에서 로컬 스토리지에서 JWT 토큰을 제거하고 인증 상태를 업데이트해야 합니다. 다음은 리듀서 코드의 예시입니다:

case LOGOUT:
  localStorage.removeItem('accessToken');
  return {
    ...state,
    isAuthenticated: false,
    loading: false,
  };

단계 4: 로그아웃 및 로그인 기능 동기화하기

모든 탭에서 로그아웃 및 로그인 기능을 동기화하려면 이벤트 리스너에 추가 로직을 추가할 수 있습니다. 다음은 예시입니다:

useEffect(() => {
  let timeout;

  const handleInvalidToken = () => {
    if (localStorage.getItem('accessToken') === null && authentication.authenticated) {
      // 모든 탭에서 로그인 페이지로 리다이렉트
      window.location.assign('/');
    }

    if (localStorage.getItem('accessToken') !== null && !authentication.authenticated) {
      // 다른 탭들이 동기화되기 위해 로그인 액션을 지연
      timeout = setTimeout(() => window.location.assign('/'), 1000);
    }
  };

  window.addEventListener('storage', handleInvalidToken);

  return function cleanup() {
    window.removeEventListener('storage', handleInvalidToken);
    clearTimeout(timeout);
  };
});

이런 단계를 따라가면 React.js에서 한 탭에서 로그아웃하면 브라우저의 모든 탭에서 로그아웃하는 기능을 성공적으로 구현할 수 있습니다. 이 솔루션은 React의 훅과 로컬 스토리지를 활용하여 원하는 동작을 달성하며 Redux에 의존하지 않습니다. 코드를 프로젝트에 맞게 조정하고 원하는대로 사용하세요.

참고 자료 : 

reactjs