리액트 라우터로 Auth 로직 짜는 법이 궁금합니다ㅜㅜ

Question

안녕하세요! 팀원 한 분과 간단하게 로그인 회원가입이 가능한 작은 예약 프로그램을 만드는 중인데 제가 리액트를 배운지 얼마 안 됐고 로그인은 처음 만들어봐서 너무 어렵네요&#x1f602; 메인은 로그인 화면이고 로그인이 성공적으로 되고 서버 쪽에서 쿠키 값이 확인되면 메인화면으로 이동하게 짜려고 하는데요. 로그인 후 서버에서 값은 잘 오는 상태고 라우트로 로그인 로직을 어떻게 구현할지 구글링해서 이것저것 찾아보다 session storage에 저장하는 방법이 제일 쉬워 보여서 참고했습니다.. Routes.js 보면 세션 값을 확인 후에 없으면 /login으로 riderect 시키고, 반대로 로그아웃 후에는 세션 값(isAuthorized)을 없애고 useHistory를 사용해 path&#61;'/login'으로 강제 이동시키게 짜봤는데 라우터라서 그런지 브라우저 새로고침을 하지 않는 이상 뒤로가기 버튼을 누르면 메인 페이지가 보입니다.. 그리고 새로고침하지 않으면 세션 값도 바로바로 받아오지 못하는데 이 부분은 제가 리액트와 자바스크립트를 잘 몰라서 어떻게 비동기로? 받아오는지 모르겠습니다 App.js에서는 밑에 사진인 Routes 컴포넌트만 렌더하고 있고 백엔드를 맡으신 분이 쿠키 작업을 다 하셔서 저는 메인을 로그인으로 하고 로그아웃 후에는 메인으로 이동할 수 없고 로그인 화면에서 벗어나지 못하게 만들어야 하는데 세션스토리지를 이용하는 게 괜찮은가요? react router로 어떻게 코드를 짜면 좋을지 알려주시면 정말 감사드리겠습니다! Routes 컴포넌트 Login 컴포넌트 Main 컴포넌트 로그아웃 부분 코드

페코옹 · Accepted Answer

대충 이런식으로 하시면 될 것같습니다. function AuthRoute(props) { const history = useHistory() const [isLoading, setIsLoading] = React.useState(true); const [isLogin, setIsLogin] = React.useState(false); React.useEffect(()=>{ const handleLogin = () => { setIsLoading(true) const isAuthorized= sessionStorage.getItem("isAuthorized") setLogin(!!isAuthorized) setLoading(false) } handleLogin() },[history]) if (isLoading) return

loading

if(!isLogin) return return }

치즈우유 · Answer

&#64;페코옹 답변 감사합니다 :) 근데 새 파일을 만들어서 하나요 아니면 Routes.js 위에 추가하면 될까요?!

페코옹 · Answer

전 그냥 component 에 추가해서 할때도 있고 routes에 넣을 때도 있고 그냥 느낌 따라 하는 편이라..그냥 편한 방법으로 하세요. 그리고 사용 하실 때는 아래와 같이.. // 인증 필요한 라우트에 이런식으로 위 코드의 포인트는 하기와 같습니다. 1. HOC를 이용하여 라우트 별 재사용2. 인증 여부를 state로 관리3. history 객체를 deps에 넣어 라우트 이동 시 인증 확인

리액트 라우터로 Auth 로직 짜는 법이 궁금합니다ㅜㅜ

3개의 답변

Q&A 목록