React - 로그인 여부에 따른 Router 관리(Router 나누기)

프로세스

private routes와 public routes를 나누어서 로그인 여부에 따라 routes를 바꿔주는 방법입니다.

 

권한별로 routes를 만드는 구조입니다.

 

만약에 권한이 3가지인 경우에는 admin, user, public 등으로 나누어 줍니다.

 

만약 권한이 많고 복잡해서 1, 2, 3, 4중에 1,2만 해당 페이지에 접근하게 만들고 싶다면 해당 페이지들만 또 다른 Routes로 분리하면 됩니다.

 

코드 작성법

폴더 구조

 

/routes/private

• AdminRoutes.js

import CommonLayout from "../../../layout/CommonLayout";
import UserList from "../../../pages/user/UserList";

const AdminRoutes = {
  path: '/',
  element: <CommonLayout />,
  children: [
    {
      path: 'user',
      children: [
        {
          path: '',
          element: <UserList />
        }
      ]
    }
  ]
}

export default AdminRoutes;

 

• UserRoutes.js

import CommonLayout from "../../../layout/CommonLayout";
import ProductAdd from "../../../pages/product/ProductAdd";

const UserRoutes = {
  path: '/',
  element: <CommonLayout />,
  children: [
		{
      path: 'product',
      children: [
        {
          path: 'add',
          element: <ProductAdd />
        }
      ]
    }
  ]
};

export default UserRoutes;

 

• CommonRoutes.js

import CommonLayout from "../../layout/CommonLayout";
import DashBoard from "../../pages/DashBoard";
import ProductList from "../../../pages/product/ProductList";

const CommonRoutes = {
  path: '/',
  element: <CommonLayout/>,
  children: [
    {
      path: '',
      element: <DashBoard/>
    },
		{
      path: 'product',
      children: [
        {
          path: '',
          element: <ProductList />
        }
      ]
    }
  ]
};

 

• index.js

import { useRoutes } from "react-router-dom";
import UserRoutes from "./user/UserRoutes";
import AdminRoutes from "./admin/AdminRoutes";
import CommonRoutes from "../CommonRoutes";

// 권한 별로 접근 가능한 routes를 넣어줍니다.

export const UserRouter = () => {

  console.log('user router 접근');

  return useRoutes([
		CommonRoutes,
    UserRoutes
  ]);
};

export const AdminRouter = () => {

  console.log('admin router 접근');

  return useRoutes([
		CommonRoutes,
    AdminRoutes
  ])
};

 

/routes/public

• LoginRoutes.js

import CommonLayout from "../../layout/CommonLayout";
import Login from "../../pages/Login";

const LoginRoutes = {
  path: '/',
  element: <CommonLayout />,
  children: [
    {
      path: '',
      element: <Login />
    }
  ]
};

export default LoginRoutes;

 

• index.js

import {useRoutes} from "react-router-dom";
import LoginRoutes from "./LoginRoutes";

const PublicRouter = () => {
 return useRoutes([
   LoginRoutes
 ]);
};

export default PublicRouter;

 

App.js

import { AdminRouter, UserRouter } from "./routes/private";
import PublicRouter from "./routes/public";
import { useSelector } from "react-redux";
import { useEffect } from "react";
import { useNavigate } from "react-router-dom";

function App() {
  const navigate = useNavigate();

  const {role, isValidToken} = useSelector((state) => state.loginData);

  console.log('App 접근');

  useEffect(() => {
     if (!isValidToken) {
       navigate('/', {replace: true});
     }
  }, [isValidToken]);

  return (
    <>
      {
        isValidToken ?
          role === "ROLE_ADMIN" ?
            <AdminRouter />
            :
            <UserRouter />
          :
          <PublicRouter />
      }

    </>
  );
}

export default App;

 

index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import reportWebVitals from './reportWebVitals';
import {BrowserRouter} from "react-router-dom";
import {Provider} from "react-redux";
import store from "./store";

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <Provider store={store}>
    <BrowserRouter>
      <App/>
    </BrowserRouter>
  </Provider>
);

reportWebVitals();

 

장단점

• 장점
  • 구조가 심플하다.
  • 권한별로 홈 url(”/”)을 다르게 사용할 수 있다.
    • public 권한의 로그인 페이지도 “/”이고 로그인 하고 나서 대시보드도 “/”로 사용가능
  • 권한별로 어떤 페이지를 접근할 수 있는지 체크하기 쉽다. (권한별로 확인할 때 좋다.)
  • 로그인 여부와 권한에 따라 페이지를 완전히 숨길 수 있다.
    • routes를 완전히 바꾸기 때문에 권한이 없는 페이지의 url이 존재하지 않는 상태가 되므로 접근자체가 불가하다.
  • 권한을 삭제하는 것이 용이하다.
    • admin 권한이 삭제된 경우 AdminRouter만 삭제하면 된다.
• 단점
  • 권한이 복잡해지면 Routes가 많아질 수 있다.
    • 권한 1, 2만 접근 가능한 페이지가 있는 경우 routes를 하나 더 추가해야한다.
  • 페이지별로 한눈에 확인하기가 힘들다.(하위페이지나 url 등)
  • 아직 테스트가 미흡해서 좀 더 테스트가 필요하다.