[9.19(화) 북스탁 프로젝트] 로그인 접근제어(로그인한 사람만 마이페이지에 접근하기!) | RequireLogin.js

 

 

 

 

const { isLoggedIn } = useAuth();

 

useAuth 훅을 사용해서 isLoggedIn 상태값을 가져오고

이걸로 현재 사용자가 로그인되어 있는지 확인할 수 있다!

 

 

 

const navigate = useNavigate();

 

useNavigate 훅을 사용해서 페이지 간 이동을 처리할 수 있다!

 

 

 

 useEffect(() => {
     if (!isLoggedIn) {
         navigate('/signin');
         alert('로그인이 필요합니다. 로그인 페이지로 이동합니다.');
     }
 }, [isLoggedIn, navigate]);

반응형

useEffect를 사용해서 컴포넌트가 렌더링될 때마다 로그인 여부를 체크한다!
useEffect 내에서 if문을 사용해서 만약 현재 사용자가 로그인되어 있지 않은 경우에는

/signin(로그인 페이지)으로 리디렉션하고 경고 메시지를 표시한다!

 

 

 

return null;

 

마지막으로, 컴포넌트의 리턴값으로 null을 설정한다!
컴포넌트 자체가 화면에 나타나지 않도록 하기 위함이다!

 

 

 

 

이 코드를 다른 경로에 적용하면

해당 경로에 접근하려는 사용자가 로그인하지 않은 경우, 자동으로 로그인 페이지로 리디렉션된다!