ProtectedRoute 사용법

[yeongipark]

ProtectedRoute란?

• 로그인하지 않은 사용자가 url로 권한없는 페이지로 접근 시 로그인 페이지로 리다이렉트 시키는 기술

구현 방법

• 로컬스토리지에 로그인 정보를 가져와 로그인 상태면 받아온 children 엘리먼트를 랜더링하고 로그인하지 않은 상태면 login 페이지로 보냄

  export const ProtectedRouter = ({ children }) => {
  return localStorage.getItem("login") ? <>{children}</> : <Navigate to="/" />;
  };

사용법

• element에 원래는 바로 컴포넌트를 적었다면 이제는 ProtectedRouter를 한번 감싸면 적용됩니다!

  <Route
        path="/myHomeTrainList"
        element={
          <ProtectedRouter>
            <HomeTranList />
          </ProtectedRouter>
        }
      />