[Challenge] 로그인 여부에 따른 페이지 라우팅

로그인 여부에 따라서 노출되어도 되는 페이지와 블락해야하는 페이지가 있다. 이 페이지들의 노출 여부를 판단해주는 컴포넌트를 따로 분리하는 과정을 프리온보딩 섭(신성환님)에서 들은 것 + 내가 이해한 것 에 따라 정리해보려고 한다.

사용 스택

react
typescript
react-router-dom

구조

src
 ┣ pages
 ┃ ┣ Home.tsx
 ┃ ┣ PageA.tsx
 ┃ ┣ PageB.tsx
 ┃ ┣ PageWithLogin.tsx
 ┃ ┗ PageWithoutLogin.tsx
 ┣ router
 ┃ ┗ RouterInfo.tsx
 ┣ App.tsx
 ┗ main.tsx

App.tsx

routerProvider로 경로를 제공한다.

function App() {
  return (
    <div className="content">
      <RouterProvider router={RouterObj} />
    </div>
  );
}

export default App;

RouterInfo.tsx

라우팅에 대한 정보를 배열로 관리하는 파일이다.
withAuth의 값에 따라 로그인이 필요한 페이지, 로그인이 필요없는 페이지로 나누어 레이아웃컴포넌트를 감싸준다.

export interface RouterItem {
  path: string;
  element: React.ReactNode;
  withAuth: boolean;
  label: string;
}
export const RouterInfo: RouterItem[] = [
  {
    path: "/login",
    element: <LoginWithMockAPI />,
    withAuth: false,
    label: "login",
  },
  {
    path: "/",
    element: <Home />,
    withAuth: false,
    label: "Home",
  },
  {
    path: "/pageA",
    element: <PageA />,
    withAuth: true,
    label: "Page A",
  },
  {
    path: "/pageB",
    element: <PageB />,
    withAuth: true,
    label: "Page B",
  },
];
//라우터를 생성
export const RouterObj = createBrowserRouter(
  RouterInfo.map((routerInfo: RouterItem) => {
    return routerInfo.withAuth
      ? {
          path: routerInfo.path,
          element: <PageWithLogin>{routerInfo.element}</PageWithLogin>,
        }
      : {
          path: routerInfo.path,
          element: <PageWithoutLogin>{routerInfo.element}</PageWithoutLogin>,
        };
  })
);

PageWithLogin.tsx

로그인했는지 여부를 확인해서 필요한 페이지를 렌더링해주는 페이지.
아직 이부분은 수업에서 진행하지 않았는데, 짧은 배움을 가진 나라면... 아마 로그인했을때 localstorage.setItem으로 토큰과 유저정보를 저장하고, localstorage.getItem으로 토큰을 꺼내 useState로 상태를 저장해 로그인여부를 판단할 것 같다.
이부분은 강의 진행 후 추가로 정리해보겠다.

interface AuthProps {
  children: React.ReactNode;
}

const PageWithLogin: React.FC<AuthProps> = ({ children }) => {
  const [isLogged, setIsLogged] = useState(); //localstorage에서 받아오기
  if (!isLogged) {
    return <>로그인이 필요합니다.</>; 
    //여기서 로그인해달라고 알린 다음 로그인페이지로 리다이렉트한다.
  }
  return (
    <>
      with auth
      <>{children}</>
    </>
  );
};

export default PageWithLogin;

PageWithoutLogin.tsx

interface WithoutAuthProps {
  children: React.ReactNode;
}

const PageWithoutLogin: React.FC<WithoutAuthProps> = ({ children }) => {
  return (
    <>
      without auth
      <>{children}</>
    </>
  );
};

export default PageWithoutLogin;