00. 주제 선정 이유

프로젝트 진행 중 URL 경로 방어를 해야하기 위해 Context API를 사용

저의 쇼핑몰 프로젝트 요구사항은 다음과 같습니다

• 로그인한 사용자만 장바구니 페이지를 사용할 수 있습니다
• admin 계정 사용자만 상품등록 페이지를 사용할 수 있습니다
• 장바구니 페이지와 상품등록 페이지는 각각 네비게이션 바의 카트 로고, 연필 로고를 클릭하면 접근할 수 있습니다.

처음에는 네비게이션 바에서 해당 페이지로 가는 로고를 안 보이게 하면 될것 같아서 네비게이션 바 내부에 로그인 상태를 저장해 상태에 따라 다르게 렌더링 했습니다.

1. 로그인 하지 않은 화면

2. 일반 계정 로그인 화면

3. admin 로그인 화면

하지만 url을 직접 입력해 접속한다면 어떻게 될까요❓

• 로그인 상태에 상관없이 페이지로 접근 가능합니다
• 이를 막기 위해서는 네비게이션 바와 페이지 컴포넌트가 로그인 상태를 공유해야 합니다
• 그리고 만약 권한이 없는 사용자가 접근하려고 할 때는 홈으로 redirect하게 만들어야 합니다.
  • redirect한 이유 : 뒤로가기를 통해 접근 못하도록 했다.