[React] 로그인하지 않은 유저가 로그인이 필요한 path로 못들어오게 막는법

첫 화면

첫화면(localhost:3000)에서 로그인 시,

JWT토큰을 응답받고 localstorage에 저장하고 /main 으로 이동하게 로직을 짰는데,

로그인을 하지 않았을 때는 /main으로 들어오지 못하게 하려고 한다.

---

막는 법

<Route path='/main' element={<Main />} />

"/main"에 해당하는 컴포넌트 <Main/>에 가서

 

const jwtToken = localStorage.getItem("jwtToken");

useEffect(() => {
        if (jwtToken == null) return nav("/");
        fetchData();
}, []);

Main 컴포넌트가 첫 마운트 됐을 때 안에 코드를 실행하게 했다.

로그인 시 localStorage에 넣은 토큰을 가져와서 null인 경우에 첫 화면으로 돌아가게 했다.

다른 방법도 여러가지 있을텐데 실제 서비스가 아닌 개인 프로젝트 용이라 일단 이렇게 해놨다.