react路由權限動態菜單如何配置

蝸牛 互聯網技術資訊 2022-08-12 20 0

本文小編為大家詳細介紹“react路由權限動態菜單如何配置”,內容詳細,步驟清晰,細節處理妥當,希望這篇“react路由權限動態菜單如何配置”文章能幫助大家解決疑惑,下面跟著小編的思路慢慢深入,一起來學習新知識吧。

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. 在應用的最外層渲染路由

這里我使用 swr 來模擬獲取當前用戶的權限,兩秒后返回。

//?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({
????//?當前用戶的權限,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>
????),
??});

權限說明

若當前 home 的權限被設置為 ["auth2", "auth3", "auth4"],當前用戶的權限只要滿足一個就會判斷為擁有此路由的權限。

動態菜單

react-router-auth-plus 會自動將 children 傳給 Layout,你不必在路由配置里傳給 Layout。如果你是 ts,將 routers 類型設置為可選即可。

useAuthMenus 會過濾掉沒有權限的路由,接下來你可以自行處理一下成你想要的數據再渲染成 antd 的 Menu 組件。

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

讀到這里,這篇“react路由權限動態菜單如何配置”文章已經介紹完畢,想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會,如果想了解更多相關內容的文章,歡迎關注蝸牛博客行業資訊頻道。

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:niceseo99@gmail.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

評論

日本韩欧美一级A片在线观看