[React] 라우터를 이용한 접근 제한 처리

📄 라우터를 이용한 접근 제한 처리

라우터를 사용해 단순하게 경로를 설정해주는 것이 아닌 토큰이나 쿠키의 여부에 따라 접근 제한처리를 하는 것도 가능합니다.

💾 [publicRoute.js]

const PublicRoute = ({ children }) => {
  const isLogined = getLocalStorageToken();
  return isLogined ? <Navigate to="/todo" /> : children;
};

• PublicRoute는 로그인 여부와 상관없이 모든 사용자에게 제공된다.
• 토큰이 있을 경우 /todo경로로 리다이렉트한다.

💾 [privateRoute.js]

const PrivateRoute = ({ children }) => {
  const isLogined = getLocalStorageToken();
  return isLogined ? children : <Navigate to="/" />;
};

• PrivateRoute는 로그인한 사용자에게만 제공된다.
• 토큰이 없을 경우 /경로로 리다이렉트 한다.

💾 [Route.js]

function Router() {
  return (
    <Routes>
      <Route
        path="/"
        element={
          <PublicRoute>
            <Home />
          </PublicRoute>
        }
      />
      <Route
        path="/todo"
        element={
          <PrivateRoute>
            <Todos />
          </PrivateRoute>
        }
      />
    </Routes>
  );
}

• Route를 설정할 때 해당 컴포넌트를 PrivateRoute 또는 PublicRoute로 감싸서 사용한다.