인증 예제

1. 설명

• 파이어 베이스를 사용하지 않은 인증예제이다.

2. 하려는 일

• 브라우즈 페이지를 보호된 페이지로 만들고 로그인이 되어야만 들어갈 수 있도록 한다.

• Firebase를 사용하지 않기 때문에 간단히 로그인의 버튼으로 인증 상태를 변경할 수 있도록 한다.

3. 방법

• 브라우즈 페이지를 인증이 되야 입장이 가능하도록 만들기 위해서 보호된 라우터로 만든다. → GuardRoute 컴포넌트

• GuardRoute 컴포넌트에 인증을 확인하고 인증이 되면 보여지는 페이지와 인증이 아닐때 보여지는 페이지를 구분하도록 상태를 설정한다.

• auth 컨텍스트에 인증 상태를 설정하고 해당 상태를 변경하는 login(), logout() 업데이트 함수를 만든다.

• logInPage에서 버튼을 클릭했을 때 컨텍스트의 인증 상태가 변경되도록 업데이트 함수를 useContext로 받아온다.

• 변경된 auth 컨텍스트의 상태는 GuardRoute에 반영되어 그려낼 페이지를 구분한다.

인증 예제 이해를 돕기 위한 구조 그림