23.04.15 접근 제한!!
계속 페이지를 구성했고 저번 글과 사이에 구현한 기능들!!
- admin 로그인 기능
- 교회 비전 페이지
- 유튜브 목록
- 유튜브 상세페이지
- 유튜브 DB 구축 및 연결
- 유튜브 게시물 작성
- 로그인 페이지 접근 시 인증 번호를 입력하지 않으면 페이지 접근 막기
문제점!!!
이건 트러블 슈팅이라고 이야기할 수 있겠지만 로그인 페이지 접근 시 인증 번호를 입력해야 접근할 수 있게 코드를 작성하는 부분이었다.
우선 LogIn.tsx에 인증 값을 변수로 선언하고 prompt를 이용해 인증하는 것으로 두고 다른 잡업을 했다. 그리고 나의 목표는 모달 창을 이용해 기능을 구현하는 것이였다.
그래서 react-modar 라이브러리를 이용해 기능을 구현을 하는데, 로그인 페이지에 접근 시 2가지 경우의 수에 반응하게 해야 했다.
- 로그인 버튼을 누렀을 때
- url로 접근했을 때
그래서 로그인 페이지 접근 시 모달이 바로 뜨게 구현을 했는데 문제는 관리자 페이지에서 테그들을 삭제하면 로그인 기능을 사용할 수 있다는 것이였다. 그래서 prompt로 구현하는 것이 더 좋을 것 같다는 생각으로 다시 돌아가고 인증 값을 DB에서 가져와 비교를 하려고 했다!!!
그런데 여기서도 문제가 실행 순서였다. useEffect보다 prompt이게 먼저 실행이 되어 DB에서 인증 값을 가져오기 전에 팝업 창이 뜬다는 것이였다!!! 눈물 ㅜㅜ
그래서 prompt가 있는 useEffect가 있는 곳에 같이 넣고 클라이언트에게 null 또는 ''일 경우 홈으로 이동하게 하고 값이 입력이 되면 DB에서 인증값을 가져오고 비교 후 맞으면 로그인 페이지 아니면 홈으로 가게 만들었다. (추후에 코드 첨부)
배웠다!!
그냥 듣기로는 prompt를 사용을 잘 안 한다고 들었는데 그건 아니라는 생각이 들었다. 확실히 코딩을 하는 것은 상황에 맞게 적적히 잘 쓰는 것이 답이라고 생각을 하고 prompt, alert은 클라이언트의 행동을 제한할 수 있다는 점이 큰 장점이라고 생각을 한다!! 이렇게 고민할 부분은 아니라고 말할 수 있지만 저번 글 처럼 최대한 보안적인 부분 생각을 안 할 수 없을 것 같다. ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ 화이팅!!!!!!!!!!!!
남은 것!
- 캘린더 기능을 구현해 1년 계획을 보여주는 것, DB에 저장하는 것을 고민하고 구현하기!
- 사역자, 장로님들의 사진과 소개글 작성하기
- 교회 연혁 만들기 (애니메이션을 넣어 만들 계획)!!
이 것까지 완성하면 우선 네이버에 홈페이지로 등록할 계획이다~~
문제의 코드
useEffect(() => { //로그인 페이지 접속 시 인증 및 중복 로그인 막기
if (loggedIn) {
alert('이미 로그인 되어 있습니다.')
navigate('/');
return;
}
if (chack) {
return;
}
const answer = prompt('관리자 로그인입니다. 인증번호를 입력해주세요', "");
const checkCertification = async () => {
// DB에서 인증 값 가져오는 코드...;
if (certification === answer) {
setChack(true);
navigate('/login');
} else {
alert("인증 번호가 틀렸습니다. 제작자에게 문의하세요")
navigate('/');
}
}
if (answer == null || answer === '') {
alert("인증 번호가 틀렸습니다. 제작자에게 문의하세요")
navigate('/');
} else (
checkCertification()
)
}, [navigate, chack, loggedIn]);