이제 애플리케이션이 거의 조립 완료되었습니다. 모든 페이지가 끝났지만 사용자가 로그인하지 않은 경우 액세스할 수 없는 몇 몇 페이지가 있습니다. 예를 들어 사용자가 로그인하지 않은 경우 노트가 있는 페이지는 로드 되어서는 안됩니다. 현재는 이것이 가능합니다. 왜냐하면 페이지가 로드되는 시점에 사용자 세션 정보가 없어 API 호출이 실패하기 때문입니다.

이런 방식으로 작동해야하는 페이지들이 있습니다. 로그인(/login) 또는 가입(/signup) URL을 입력하면 사용자가 홈페이지로 리디렉션되어야 합니다. 현재는 사용자가 이미 로그인되어 있어도 로그인 및 가입 페이지가로드됩니다.

위와 같은 문제를 해결할 수 있는 방법은 여러 가지가 있습니다. 가장 간단한 방법은 컨테이너의 조건을 확인하고 리디렉션하는 것입니다. 그러나 우리가 동일한 로직을 필요로하는 몇 개의 컨테이너를 가지고 있기 때문에 (세션을 상태에 추가하기 chapter) 챕터에서 ‘AppliedRoute’처럼) 특별한 경로를 만들 수 있습니다.

우리가 가지고 있는 이러한 문제를 해결하기 위해 두 가지 다른 경로 컴포넌트를 만들 것입니다.

  1. 라우팅되기 전에 사용자가 인증되었는지 확인하는 AluthenticatedRoute라는 경로 컴포넌트.

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

이제 이러한 컴포넌트를 만들어 보겠습니다.