react?路由權(quán)限動(dòng)態(tài)菜單方案配置react-router-auth-plus

更新時(shí)間：2022年08月11日 10:07:28 作者：daisY

這篇文章主要為大家介紹了react路由權(quán)限動(dòng)態(tài)菜單方案react-router-auth-plus傻瓜式配置詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

正文

在 react 中做路由權(quán)限管理，一直是比較麻煩的事，不像 vue 中有進(jìn)入路由前攔截的功能。在摸魚(yú)時(shí)間擼了一個(gè)傻瓜式配置的路由權(quán)限 library (基于 react-router v6)。

react-router v6 文檔地址

react-router-auth-plus 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. 在應(yīng)用的最外層渲染路由

這里我使用 swr 來(lái)模擬獲取當(dāng)前用戶的權(quán)限，兩秒后返回。

// 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({
    // 當(dāng)前用戶的權(quán)限，string[]
    auth: auth || [],
    routers,
    // 跳轉(zhuǎn)到?jīng)]權(quán)限的路由時(shí)，用戶自定義顯示。這里我顯示 403 頁(yè)面。
    noAuthElement: (router) => <NotAuth />,
    // 用戶權(quán)限還沒(méi)請(qǐng)求到時(shí)，渲染 loading
    render: (element) => (isValidating ? element : <Loading />),
  });
}

或你可以使用 jsx 的方式來(lái)配置

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>
    ),
  });

這樣就完成了，是不是很傻瓜式呢？

權(quán)限說(shuō)明

若當(dāng)前 home 的權(quán)限被設(shè)置為 ["auth1", "auth2", "auth3"]，當(dāng)前用戶的權(quán)限只要滿足一個(gè)就會(huì)判斷為擁有此路由的權(quán)限。

動(dòng)態(tài)菜單

react-router-auth-plus 會(huì)自動(dòng)將 children 傳給 Layout，你不必在路由配置里傳給 Layout。如果你是 ts，將 routers 類型設(shè)置為可選即可。

useAuthMenus 會(huì)過(guò)濾掉沒(méi)有權(quán)限的路由，接下來(lái)你可以自行處理一下成你想要的數(shù)據(jù)再渲染成 antd 的 Menu 組件。

import { useAuthMenus, AuthRouterObject } from "react-router-auth-plus";
interface LayoutProps {
  routers?: AuthRouterObject;
}
const Layout:FC<LayoutProps> = ({ routers }) => {
   const menus = useAuthMenus(routers);
   ...
}

以上就是react 路由權(quán)限動(dòng)態(tài)菜單方案配置react-router-auth-plus的詳細(xì)內(nèi)容，更多關(guān)于react 路由權(quán)限動(dòng)態(tài)菜單的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: