230713 react 인증을 위한 페이지 컴포넌트

230713 react 인증을 위한 페이지 컴포넌트

문제가 생긴 것은 url을 통해 직접 페이지에 접속할 때였다. 예를 들어  '글 작성 페이지' 컴포넌트에서는 인증된 사용자인지 확인하고 비로그인 상태이면 홈페이지로 페이지를 이동시킨다. 하지만 url을 통해 직접 페이지에 접속하면 인증이 완료되기 전에 '글 작성 페이지'에서 로그인 상태를 확인하고 비로그인 상태라 판단하여 홈페이지로 보내버린다.또한 인증이 필요한 페이지가 많아지면 매번 페이지에 인증된 사용자인지 확인해야 하는 번거로움이 있다.

 

항상 비로그인 상태로 판단되는 문제

url을 통한 직접 이동 시 Redux에서 인증 전에 해당 페이지 컴포넌트에서 인증확인을 먼저 함 -> 항상 비로그인 상태로 처리됨

페이지 컴포넌트에서는 자동로그인이 되고 있는 중에 비로그인 상태라고 판단해 페이지를 이동시킴

해결

인증된 사용자인지를 확인하는 페이지를 따로 만들고 감싸서 해결

자동 로그인, 로그인 또는 로그아웃 동작이 완료되고 && 사용자가 로그인 상태일 때만 페이지를 표시하고

동작은 완료됐지만 로그인 상태가 아니면 홈으로 페이지를 이동시킨다

<AuthPage>
  <PostWritePage/>
</AuthPage>

const AuthPage = ({ children }) => {
  const { isLoading,isLogged } = useSelector((state)=>state.auth)
  const navigate = useNavigate()
  useEffect(() => {
    if(isLoading) return
    if(!isLogged) {
        alert('회원만 접근 가능합니다.')
        navigate('/')
    }
  },[isLogged, navigate,isLoading])

  if(isLoading || !isLogged) return null
  return (
    <>{children}</>
  )
}​