react|react 路由权限动态菜单方案配置react-router-auth-plus
目录
- 正文
- 如何使用
- 1. 配置路由
- 2. 在应用的最外层渲染路由
- 权限说明
- 动态菜单
正文 在 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:},{ path: "/login", element: },{element: ,children: [{ path: "/home", element: , auth: ["admin"] },{ path: "/setting", element:},{path: "/application",element: ,auth: ["application"],},],},{ path: "*", element: },];
2. 在应用的最外层渲染路由
这里我使用 swr 来模拟获取当前用户的权限,两秒后返回。
// App.tsximport { useAuthRouters } from "react-router-auth-plus"; const fetcher = async (url: string): Promise =>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) =>,// 用户权限还没请求到时,渲染 loadingrender: (element) => (isValidating ? element : ),}); }
或你可以使用 jsx 的方式来配置
import { AuthRoute, createAuthRoutesFromChildren } from "react-router-auth-plus"; useAuthRouters({auth: auth || [],noAuthElement: (router) =>,render: (element) => (isValidating ? element : ),routers: createAuthRoutesFromChildren( } />} />}>} auth={["admin"]} />} />}auth={["application"]}/>} /> ),});
这样就完成了,是不是很傻瓜式呢?
权限说明 若当前 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= ({ routers }) => {const menus = useAuthMenus(routers); ...}
【react|react 路由权限动态菜单方案配置react-router-auth-plus】以上就是react 路由权限动态菜单方案配置react-router-auth-plus的详细内容,更多关于react 路由权限动态菜单的资料请关注脚本之家其它相关文章!
推荐阅读
- React重新渲染指南
- React报错之The tag is unrecognized in this browser
- React可视化大屏编辑器的实现方案
- react|react native常用插件
- react.js|React(9)—— Hooks - LazyLoad - Context - 组件优化 - 错误边界 - 组件通信方式总结
- 前端|Next.js 与 React 之间的比较
- react|react-router-dom v6 使用
- React|React 组件三大属性
- React|react-router-dom V6
- reactjs|react组件实例对象的三大核心(state,props,refs)