심플톤 구성! React Route 권한 및 동적 메뉴 체계 - react-router-auth-plus

소개하다

react-router v6를 기반으로 권한 관리를 쉽게 사용할 수 있습니다.
github

사용하는 방법

1. 구성 라우터

import { AuthRouterObject } from "react-router-auth-plus";

const routers: AuthRouterObject[] = [
  { path: "/", element: <Navigate to="/home" replace /> },
  { path: "/login", element: <Login /> },
  {
    element: <Layout />,
    children: [
      { path: "/home", element: <Home />, auth: ["admin"] },
      { path: "/setting", element: <Setting /> },
      {
        path: "/application",
        element: <Application />,
        auth: ["application"],
      },
    ],
  },
  { path: "*", element: <NotFound /> },
];

2. App.tsx에서 라우터 렌더링

여기서는 SWR을 사용하여 현재 사용자의 권한을 얻고 2초 후에 반환하는 것을 시뮬레이트합니다.

// App.tsx
import { useAuthRouters } from "react-router-auth-plus";

const fetcher = async (url: string): Promise<string[]> =>
  await new Promise((resolve) => {
    setTimeout(() => {
      resolve(["admin"]);
    }, 2000);
  });

function App() {
  const { data: auth, isValidating } = useSWR("/api/user", fetcher, {
    revalidateOnFocus: false,
  });

  return useAuthRouters({
    // current user auth，string[]
    auth: auth || [],
    routers,
    // 跳转到没权限的路由时，用户自定义显示。这里我显示 403 页面。
    noAuthElement: (router) => <NotAuth />,
    // 用户权限还没请求到时，渲染 loading
    render: (element) => (isValidating ? element : <Loading />),
  });
}

jsx 스타일을 사용할 수 있습니다

import { AuthRoute, createAuthRoutesFromChildren } from "react-router-auth-plus";

useAuthRouters({
    auth: auth || [],
    noAuthElement: (router) => <NotAuth />,
    render: (element) => (isValidating ? element : <Loading />),
    routers: createAuthRoutesFromChildren(
      <Routes>
        <AuthRoute path="/" element={<Navigate to="/home" replace />} />
        <AuthRoute path="/login" element={<Login />} />
        <AuthRoute element={<Layout />}>
          <AuthRoute path="/home" element={<Home />} auth={["admin"]} />
          <AuthRoute path="/setting" element={<Setting />} />
          <AuthRoute
            path="/application"
            element={<Application />}
            auth={["application"]}
          />
        </AuthRoute>
        <AuthRoute path="*" element={<NotFound />} />
      </Routes>
    ),
  });

동적 메뉴

react-router-auth-plus 자동으로 자식을 레이아웃에 전달합니다. 경로 구성에서 레이아웃에 자식을 전달할 필요가 없습니다. typescript를 사용하는 경우 라우터 유형을 선택 사항으로 설정합니다. UseAuthMenus는 권한이 없는 경로를 필터링합니다.

import { useAuthMenus, AuthRouterObject } from "react-router-auth-plus";

interface LayoutProps {
  routers?: AuthRouterObject;
}

const Layout:FC<LayoutProps> = ({ routers }) => {
   const menus = useAuthMenus(routers);

   ...
}

팁

사용자 인증이 ["auth1"]이면 홈 라우터 인증 구성["auth1", "auth2"]에 권한이 있는 것으로 판단됩니다.

react-router-auth-plus이(가) 도움이 된다면 별표 하나 주시겠어요? 감사.