[react] react-router-dom으로 페이지 접근을 막자!

 

 

 

 

개발 시 비로그인 상태의 유저가 들어갈 수 없는 페이지같은,

사용자의 권한에 따라 페이지의 접근을 제한하는 경우를 많이 볼 수 있다.

개인 프로젝트를 진행하면서 이같은 상황에 맞닥뜨리게 되어 해결책을 생각해 보았다.

 

 

1) 네비게이션 바 메뉴를 클릭할 때 처리한다?

• 이는 사용자가 직접 주소창을 이용해 접근할 수 있다.

 

2) 해당 페이지에서 useEffect hook으로 처리한다?

• 로그인을 원할 시 로그인 페이지로 이동시킨다.
• 로그인을 원하지 않을 시 메인페이지로 이동시킨다.
  • 이 방법을 사용하려고 했지만, 정상적으로 동작하지 않았다. 처음 페이지 진입 시에는 잘 동작했지만, 두번째부터는 리렌더링이 발생하지 않아서 경고창 자체가 뜨지 않았다. data fetch나 상태 관리를 recoil로 구현했기 때문에 값을 캐싱해서 그런...가?
• 접근을 제한해야 하는 페이지마다 해당 로직을 구현해야 하기 때문에 비효율적이다.

 

3) react-router-dom으로 처리한다!

• 참고 자료 ) https://velog.io/@apro_xo/React-react-router-dom%EC%9D%84-%EC%82%AC%EC%9A%A9%ED%95%98%EC%97%AC-%EB%A1%9C%EA%B7%B8%EC%9D%B8-%EC%9C%A0%EB%AC%B4%EC%97%90-%EB%94%B0%EB%9D%BC-%EC%82%AC%EC%9A%A9%EC%9E%90-%EC%A0%91%EA%B7%BC-%EB%A7%89%EA%B8%B0

import { Navigate } from "react-router-dom";

const PrivateRoute = ({ isSignedIn, component: Component }) => {
  return isSignedIn ? (
    Component
  ) : (
    <Navigate to="/Signin" {...alert("로그인이 필요합니다.")}></Navigate>
  );
};

export default PrivateRoute;

function App() {
  const isSignedIn = useRecoilValue(IsSignInStateAtom);
  return (
        <Routes>
          <Route
            path="/sharing-space"
            element={
              <PrivateRoute
                component={<SharingSpacePage />}
                isSignedIn={isSignedIn}
              />
            }
          />
        </Routes>
  );
}

• 페이지가 라우팅되면, PrivateRoute 컴포넌트로 먼저 진입되고, props로 로그인 상태를 넘겨주었다. 
• true면 원래 진입하려던 페이지로 들어가고, 아닐 시 경고창과 함께 로그인 페이지로 들어간다.