만약에 말야...

만약에 로그인하지 않은 사용자가 유저 페이지로 이동하는 버튼을 클릭하면 어떻게 될까? 아마도 유저 페이지에서 유저 정보를 읽는 동작을 수행할 것이기 때문에 유저 정보가 없는 사용자가 접근한다면 오류가 발생할 것이다.

Protected Routing

Protected Routing이란 특정 페이지 및 경로에 대한 접근을 차단하는 방법이다. 즉, 로그인되지 않은 유저가 로그인을 필요로 하는 페이지로 접근하는 것을 방지하는 라우팅 기법이다. 다음은 현재 진행중인 프로젝트에서 구현한 protected routing이다.

<Route 
  path='/user' 
  element={<RequireAuth><UserPage /></RequireAuth>}>
</Route>

유저 페이지 뿐만 아니라 로그인한 유저만 사용할 수 있는 보드 페이지, 스크랩 페이지를 RequireAuth 태그로 감싸서 사용하고 있다.

RequireAuth 코드

유튜브를 참고하여 만든 RequireAuth 코드이다.

export function RequireAuth({ children }: { children: React.ReactNode }) {
    const token = localStorage.getItem('token');
    const location = useLocation();

    return token ? (
        children
    ) : (
        <Navigate to={"/main"} replace state={{ path: location.pathname }}></Navigate>
    )
}

해당 코드에서는

1. localStorage에 저장되어 있는 토큰 유무를 통해 권한이 있는 유저인지를 판단한다.
2. 권한이 있는 유저라면 RequireAuth로 감쌌던 children을 렌더링한다.
3. 권한이 없는 유저라면 메인 페이지로 navigate시킨다.