URL로의 직접 접근 제한하기

사이트를 구축하다 보면 로그인 등 인증된 사용자만이 접근할 수 있는 페이지 등이 필요한 경우가 많다.

이를 구현하기 위해서는 몇 가지의 방법이 있는데, 나는 그 중에서 usenavigate()를 이용하여 URL로의 직접 접근을 차단하였다.

물론, fetch를 이용하여 데이터를 GET할 때 headers에 토큰 및 인증인가를 실행하여 차단하는 방법도 있다. 이 방법은 서버 개발자 쪽에서도 구현을 해 주어야 하는 부분이다.

나는 여기에 한층 더해, 버튼을 클릭하여 router를 전환할 때, 즉 useNavigate를 사용할 때 두 번째 인자로 state를 같이 전달하였다.

전달 페이지
onClick={()=>{navigate('/', state: {isValid: true } }}

받는 페이지
useLocation() import하고 난 후
if(location.state.isValid) { return <div>404 not found</div>}

이렇게 구현을 하게 되면, 특정 버튼을 클릭해야지만 navigate 함수로 인해 state가 전달이 되고, 그래야지만 다음 페이지가 로딩이 된다.
특정 버튼이 아닌 url로 직접 접근하게 되면 if문이 실행되어 404 not found 컴포넌트가 나타나게 된다.