react 路由权限动态菜单方案配置react-router-auth-plus

 更新时间:2022年08月11日 10:07:28   作者:daisY  
这篇文章主要为大家介绍了react路由权限动态菜单方案react-router-auth-plus傻瓜式配置详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪

脚本之家 / 编程助手:解决程序员“几乎”所有问题!
脚本之家官方知识库 → 点击立即使用

正文

在 react 中做路由权限管理,一直是比较麻烦的事,不像 vue 中有进入路由前拦截的功能。在摸鱼时间撸了一个傻瓜式配置的路由权限 library (基于 react-router v6)。

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 路由权限动态菜单的资料请关注脚本之家其它相关文章!

蓄力AI

微信公众号搜索 “ 脚本之家 ” ,选择关注

程序猿的那些事、送书等活动等着你

原文链接:https://juejin.cn/post/7122662408149008414

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若内容造成侵权/违法违规/事实不符,请将相关资料发送至 reterry123@163.com 进行投诉反馈,一经查实,立即处理!

相关文章

  • 简易的redux createStore手写实现示例

    简易的redux createStore手写实现示例

    这篇文章主要介绍了简易的redux createStore手写实现示例,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-10-10
  • React+ts实现二级联动效果

    React+ts实现二级联动效果

    这篇文章主要为大家详细介绍了React+ts实现二级联动效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-09-09
  • react-native之ART绘图方法详解

    react-native之ART绘图方法详解

    本篇文章主要介绍了react-native之ART绘图方法详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08
  • 一文详解React Redux设计思想与工作原理

    一文详解React Redux设计思想与工作原理

    最近看项目中使用了 Redux, 便尝试了解一波 Redux 的设计思想与工作原理,所以本文详细的给大家介绍了Redux设计思想与工作原理,需要的朋友可以参考下
    2023-09-09
  • React触发render的实现方法

    React触发render的实现方法

    这篇文章主要介绍了React触发render的实现方法,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • react+zarm实现底部导航栏的示例代码

    react+zarm实现底部导航栏的示例代码

    本文主要介绍了react + zarm 实现底部导航栏的示例代码,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-05-05
  • 详解React中合并单元格的正确写法

    详解React中合并单元格的正确写法

    用表格进行页面布局,页面布局在各种浏览器的的兼容性, 本文主要介绍了详解React中合并单元格的正确写法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-01-01
  • React使用api的方式封装弹窗的示例代码

    React使用api的方式封装弹窗的示例代码

    在现代开发中的弹窗样式,经常会是底部一个叉号样式的弹窗,但是目前组件库中并无类似弹窗组件,本文小编给大家介绍了React使用api的方式封装弹窗的示例,感兴趣的小伙伴跟着小编一起来看看吧
    2024-09-09
  • react实现一个优雅的图片占位模块组件详解

    react实现一个优雅的图片占位模块组件详解

    这篇文章主要给大家介绍了关于react如何实现一个还算优雅的占位模块图片组件的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧。
    2017-10-10
  • create-react-app安装出错问题解决方法

    create-react-app安装出错问题解决方法

    这篇文章主要介绍了create-react-app安装出错问题解决方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-09-09

最新评论