#3 개발일지 - 페이지별 라우터 인가 처리

로그인/회원가입을 구현하게 되면 로그인 요청을 보내는 인증과 로그인 한 유저와 로그인하지 않은 유저를 구분하도록 인가 기능이 필요하다.

참고한 블로그에서 너무 잘 정리해주셔서 해당 코드로 참고해서 프로젝트에 반영하였다 🥺

router.tsx 파일에서 페이지별 권한 여부를 같이 추가해주어서 권한이 없는 유저는 루트 페이지로 리다이렉트 시켜서 유저별로 접근 가능한 페이지를 구분해줄 수 있다!!

index.tsx

const router = createBrowserRouter(routerInfo);

const root = ReactDOM.createRoot(
  document.getElementById("root") as HTMLElement
);
root.render(
  <Provider store={store}>
    <RouterProvider router={router} />
  </Provider>
);

Authorization.tsx

const Authorization = ({ children }: PropsWithChildren) => {
  const navigate = useNavigate();
  const auth = useSelector((state: RootState) => state.accessToken);

  useEffect(() => {
    if (!auth) {
      console.log("현재 권한이 없습니다");
      navigate("/");
    }
  }, [auth]);

  return <div>{children}</div>;
};

export default Authorization;

router.tsx

import Authorization from "../components/Authorization";
import NotFound from "./error";
import LoginPage from "./login";
import MainPage from "./main";
import RootPage from "./root";
import SignUpPage from "./signUp";
import TagPage from "./tag";

export const routerChildrenInfo = [
  {
    index: true,
    element: <RootPage />,
    withAuthorization: false,
  },
  {
    path: "main",
    element: <MainPage />,
    withAuthorization: true,
  },
  {
    path: "signup",
    element: <SignUpPage />,
    withAuthorization: false,
  },
  {
    path: "login",
    element: <LoginPage />,
    withAuthorization: false,
  },
  {
    path: "tag",
    element: <TagPage />,
    withAuthorization: true,
  },
];

export const routerWithAuth = routerChildrenInfo.map((route) => {
  return route.withAuthorization
    ? {
        path: route.path,
        element: <Authorization>{route.element}</Authorization>,
      }
    : {
        index: true,
        path: route.path,
        element: route.element,
      };
});

export const routerInfo = [
  {
    path: "/",
    errorElement: <NotFound />,
    children: routerWithAuth,
  },
];