보안 페이지 설정하기

우리 앱을 거의 완성했습니다. 모든 페이지가 준비되었지만, 사용자가 로그인하지 않았을 때 접근할 수 없어야 하는 몇 가지 페이지가 있습니다. 예를 들어, 사용자가 로그인하지 않았을 때 노트가 있는 페이지는 로드되지 않아야 합니다. 현재는 이 경우 오류가 발생합니다. 페이지가 로드되고 세션에 사용자가 없기 때문에 API 호출이 실패하기 때문입니다.

또한 비슷한 방식으로 동작해야 하는 몇 가지 페이지가 있습니다. 사용자가 로그인(/login) 또는 회원가입(/signup) URL을 입력하면 홈페이지로 리디렉션되도록 하고 싶습니다. 현재는 사용자가 이미 로그인했음에도 불구하고 로그인 및 회원가입 페이지가 로드됩니다.

위 문제를 해결하는 방법은 여러 가지가 있습니다. 가장 간단한 방법은 컨테이너에서 조건을 확인하고 리디렉션하는 것입니다. 하지만 동일한 로직이 필요한 여러 컨테이너가 있기 때문에 이를 위한 특별한 라우트를 생성할 수 있습니다.

우리는 두 가지 다른 라우트 컴포넌트를 만들어 문제를 해결할 것입니다.

  1. 사용자가 인증되었는지 확인한 후 라우팅하는 AuthenticatedRoute라는 라우트.

  2. 사용자가 인증되지 않았는지 확인하는 UnauthenticatedRoute라는 컴포넌트.

이제 이 컴포넌트들을 만들어 보겠습니다.