react 路由权限动态菜单方案配置react-router-auth-plus
脚本之家 / 编程助手:解决程序员“几乎”所有问题!
脚本之家官方知识库 → 点击立即使用
正文
在 react 中做路由权限管理,一直是比较麻烦的事,不像 vue 中有进入路由前拦截的功能。在摸鱼时间撸了一个傻瓜式配置的路由权限 library (基于 react-router v6)。
react-router-auth-plus github 地址
如何使用
1. 配置路由
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | 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 来模拟获取当前用户的权限,两秒后返回。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | // 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 的方式来配置
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | 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 的权限被设置为 ["auth1", "auth2", "auth3"]
,当前用户的权限只要满足一个就会判断为拥有此路由的权限。
动态菜单
react-router-auth-plus
会自动将 children 传给 Layout,你不必在路由配置里传给 Layout。如果你是 ts,将 routers 类型设置为可选即可。
useAuthMenus
会过滤掉没有权限的路由,接下来你可以自行处理一下成你想要的数据再渲染成 antd 的 Menu 组件。
1 2 3 4 5 6 7 8 | import { useAuthMenus, AuthRouterObject } from "react-router-auth-plus" ; interface LayoutProps { routers?: AuthRouterObject; } const Layout:FC<LayoutProps> = ({ routers }) => { const menus = useAuthMenus(routers); ... } |
以上就是react 路由权限动态菜单方案配置react-router-auth-plus的详细内容,更多关于react 路由权限动态菜单的资料请关注脚本之家其它相关文章!
微信公众号搜索 “ 脚本之家 ” ,选择关注
程序猿的那些事、送书等活动等着你
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若内容造成侵权/违法违规/事实不符,请将相关资料发送至 reterry123@163.com 进行投诉反馈,一经查实,立即处理!
最新评论