react 路由权限动态菜单方案配置react-router-auth-plus
正文
在 react 中做路由权限管理,一直是比较麻烦的事,不像 vue 中有进入路由前拦截的功能。在摸鱼时间撸了一个傻瓜式配置的路由权限 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. 在应用的最外层渲染路由
这里我使用 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 的权限被设置为 ["auth1", "auth2", "auth3"]
,当前用户的权限只要满足一个就会判断为拥有此路由的权限。
动态菜单
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 路由权限动态菜单方案配置react-router-auth-plus的详细内容,更多关于react 路由权限动态菜单的资料请关注猪先飞其它相关文章!
原文出处:https://juejin.cn/post/7122662408149008414
相关文章
关于React Native报Cannot initialize a parameter of type'NSArray<id<RCTBridgeModule>>错误(解决方案)
这篇文章主要介绍了关于React Native报Cannot initialize a parameter of type'NSArray<id<RCTBridgeModule>>错误,本文给大家分享解决方案,需要的朋友可以参考下...2021-05-12- 这篇文章主要介绍了React使用高德地图的实现示例(react-amap),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-04-18
React引入antd-mobile+postcss搭建移动端
本文给大家分享React引入antd-mobile+postcss搭建移动端的详细流程,文末给大家分享我的一些经验记录使用antd-mobile时发现我之前配置的postcss失效了,防止大家踩坑,特此把解决方案分享到脚本之家平台,需要的朋友参考下吧...2021-06-21使用 React 和 Threejs 创建一个VR全景项目的过程详解
这篇文章主要介绍了使用 React 和 Threejs 创建一个VR全景项目的过程详解,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-04-06- 思路其实没有那么复杂,把地图想成一个盒子容器,地图中心点想成盒子中心点;扎点在【地图中心点】不会动,当移动地图时,去获取【地图中心点】经纬度,设置某个位置的时候,将经纬度设置为【地图中心点】即可...2021-06-20
- 这篇文章主要为大家详细介绍了React列表栏及购物车组件使用,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-06-28
- 这篇文章主要介绍了react使用antd表单赋值,用于修改弹框的操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-10-29
- 这篇文章主要介绍了React Native 启动流程简析,文以 react-native-cli 创建的示例工程(安卓部分)为例,给大家分析 React Native 的启动流程,需要的朋友可以参考下...2021-08-18
- 这篇文章主要介绍了一百多行代码实现react拖拽hooks,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-03-21
- useState 通过在函数组件里调用它来给组件添加一些内部 state,React 会在重复渲染时保留这个 state,接下来通过一个示例来看看怎么使用 useState吧...2021-06-04
- 高阶组件就是接受一个组件作为参数并返回一个新组件(功能增强的组件)的函数。这里需要注意高阶组件是一个函数,并不是组件,这一点一定要注意,本文给大家分享React 高阶组件HOC使用小结,一起看看吧...2021-06-13
- 这篇文章主要介绍了React中使用setInterval函数的实例,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-04-06
关于antd tree和父子组件之间的传值问题(react 总结)
这篇文章主要介绍了关于antd tree 和父子组件之间的传值问题,是小编给大家总结的一些react知识点,本文通过一个项目需求实例代码详解给大家介绍的非常详细,需要的朋友可以参考下...2021-06-02- 本文主要介绍了react为什么不推荐使用index作为key,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-07-22
- 这篇文章主要介绍了react自动化构建路由的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-04-23
- 这篇文章主要介绍了React Class组件生命周期,包括react组件的两种定义方式和class组件不同阶段生命周期函数执行顺序,本文给大家介绍的非常详细,需要的朋友可以参考下...2021-08-14
- 这篇文章主要介绍了react+ts实现简单jira项目,本文通过图文实例相结合给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-07-30
- 本篇文章主要介绍了React组件通信详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧...2021-10-15
- 这篇文章主要介绍了React中组件之间通信的方式,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-07-27
- 众所周知,react推出了hooks之后,很多项目就开始往hooks上靠拢,所以也就出现了class和hooks交叉使用的项目。这个时候使用ref需要注意一些东西...2021-06-20