Authentication Router in React

• 인증 라우터는 로그인한 사용자나 특정 권한을 가진 사용자만 특정 페이지에 접근할 수 있도록 제어하는 기능을 가진다. 이를 구현하기 위해 리액트 라우터 v6의 Outlet 컴포넌트를 사용한다.

• 사용자 권한은 서버로부터 받아오며, 이를 위해 비동기 요청이 수행된다. 사용자 정보는 JWT(Json Web Token)를 통해 추출하며, 이 정보는 로컬 스토리지에 저장된다.

• 인증 라우터는 로그인 여부와 관리자 여부를 판단 후, 적합하지 않은 사용자인 경우 홈 화면으로 리다이렉트시키는 기능을 가진다. 이를 위해 UserProvider 컴포넌트를 사용해 로그인 여부와 사용자 정보를 전달받는다.

• 애플리케이션 메인 컴포넌트에서는 접근 제어가 필요한 경로를 AuthRouter 컴포넌트가 지정된 루트의 하위 루트로 지정한다. 이를 통해 특정 페이지에 대한 접근 제어를 수행한다.