React 리액트 로그인 토큰 만료됐을 때 모달 띄우는 방법

 

 

로그인을 구현할 때 30분, 1시간, 2시간 이렇게 만료 시간을 정해서 로그아웃이 되도록 구현했다!

그런데, 로그아웃이 되었는지 알려주지 않으니까 마이 페이지 들어가서야 아 로그아웃 됐구나 라는 생각이 들었다 ㅠㅡㅠ 그래서 로그아웃이 되었음을 알려주는 모달을 만들었다.

 

처음 구현해본 거라서, 더 좋은 방법이 있을 것 같은데 있다면 공유해주세요❤️

 

1️⃣ 일단, 나는 헤더에 코드를 작성했다. 헤더 컴포넌트는 전 컴포넌트에서 사용하기 때문에, 코드를 여러번 작성하지 않아도 된다.

 

 

🔷 먼저 전체 코드 기록하기! 여기까지가 모달 뜨는 부분이고 아래에 헤더 코드 더 있다는 점 참고!

 

 // 토큰 만료되면 로그아웃
  const navigate = useNavigate();
  const token = getCookie('accessToken');
  const [loginOn, setLoginOn] = useState(true);

  useEffect(() => {
    if (!token) {
      setLoginOn(false);
    }
  }, [loginOn]);

  return (
    <>
      {loginOn ? (
        ''
      ) : (
        <StNeedLogin>
          <StNeedLoginModal>
            <StLoginModalTop>자동 로그아웃 안내</StLoginModalTop>
            <StLoginModalImg>
              <StLogoutAlert
                src={logoutAlert}
                alt='로그인 필요'
              />
            </StLoginModalImg>
            <StLoginModaltxt>
              로그인 후 1시간이 경과되어
              <br />
              자동 로그아웃 되었습니다
            </StLoginModaltxt>
            <StNeedLoginBtn
              onClick={() => {
                navigate('/login');
              }}
            >
              다시 로그인 하기
            </StNeedLoginBtn>
          </StNeedLoginModal>
        </StNeedLogin>
      )}

 

 

 

2️⃣ 나는 로그인을 쿠키 방식으로 구현했기 때문에, 쿠키에서 토큰을 가져오고 useState를 사용해서 login중인지 확인해주었다.

 

  const token = getCookie('accessToken');
  const [loginOn, setLoginOn] = useState(true);

 

3️⃣ useEffect를 사용해서, 로그인 중이 아니면(= 토큰이 없으면) 모달이 뜨도록 함수 만들기

 

  useEffect(() => {
    if (!token) {
      setLoginOn(false);
    }
  }, [loginOn]);

 

 

4️⃣ 이제 return 안 코드에 로그인이 안 되어 있으면? 나오는 모달 만들기!

 

 <>
      {loginOn ? (
        ''
      ) : (
        <StNeedLogin>
          <StNeedLoginModal>
            <StLoginModalTop>자동 로그아웃 안내</StLoginModalTop>
            <StLoginModalImg>
              <StLogoutAlert
                src={logoutAlert}
                alt='로그인 필요'
              />
            </StLoginModalImg>
            <StLoginModaltxt>
              로그인 후 1시간이 경과되어
              <br />
              자동 로그아웃 되었습니다
            </StLoginModaltxt>
            <StNeedLoginBtn
              onClick={() => {
                navigate('/login');
              }}
            >
              다시 로그인 하기
            </StNeedLoginBtn>
          </StNeedLoginModal>
        </StNeedLogin>
      )}
      
      요기 아래는 헤더 코드
      
  <>

 

 

스타일 컴포넌트를 사용해서 css 디자인을 해주었다,

간단하게 이런식으로 구현하면, 로그인 토큰 만료되었을 때 모달이 뜨는 것을 확인할 수 있다.

 

 

 

5️⃣ 위 코드에 기록되어 있는데 모달 안 버튼에 navigate("/login")을 넣어서, 로그아웃 모달이 뜨고 로그인 화면으로 돌아가게 구현해주면 유저에게 더 좋은 기능이 될 수 있다!

 

 

이렇게 하면 로그인 토큰 만료되었을때 로그아웃 모달 띄우기 구현 완료!