React 路由权限管理：傻瓜式配置 - react-router-auth-plus

傻瓜式配置 React 路由权限，还不快试试？

在 React 中进行路由权限管理一直以来都是一件比较麻烦的事情，不像 Vue 中有进入路由前拦截的功能，所以需要开发人员自己手动实现路由权限的管理，这不仅耗时费力，而且容易出错。

为了解决这个问题，本文作者创建了一个傻瓜式配置的路由权限库 react-router-auth-plus。它基于 react-router v6，可以帮助开发者轻松地管理路由权限和动态菜单。

react-router-auth-plus 的主要特点如下：

• 傻瓜式配置：react-router-auth-plus 提供了非常简单的配置方式，只需要在路由配置中添加几个属性，即可轻松地实现路由权限的管理。
• 动态菜单：react-router-auth-plus 可以根据用户的权限动态地生成菜单，这样用户只能看到自己有权限访问的菜单项。
• 细粒度的权限控制：react-router-auth-plus 可以对路由权限进行细粒度的控制，比如可以控制到某个按钮的权限，这样可以更好地保护用户的隐私和数据安全。

使用 react-router-auth-plus 管理路由权限

安装

npm install react-router-auth-plus

配置

在使用 react-router-auth-plus 之前，需要先进行配置。配置过程非常简单，只需要在路由配置中添加几个属性即可。

import { createBrowserRouter, createRoutesFromElements } from "react-router-dom";
import { AuthProvider } from "react-router-auth-plus";

const routes = createRoutesFromElements([
  {
    path: "/",
    element: <HomePage />,
  },
  {
    path: "/dashboard",
    element: <DashboardPage />,
    auth: true, // 需要权限才能访问
  },
  {
    path: "/settings",
    element: <SettingsPage />,
    auth: true, // 需要权限才能访问
    children: [
      {
        path: "profile",
        element: <ProfilePage />,
      },
      {
        path: "password",
        element: <PasswordPage />,
      },
    ],
  },
]);

const router = createBrowserRouter(routes);

const App = () => {
  return (
    <AuthProvider>
      <RouterProvider router={router} />
    </AuthProvider>
  );
};

在上面的代码中，我们首先创建了一个路由配置数组 routes，然后使用 createBrowserRouter 函数创建了一个路由器 router。

接下来，我们创建了一个 AuthProvider 组件，并将其包裹在 RouterProvider 组件外面。AuthProvider 组件负责管理路由权限，它会自动从存储中获取用户的权限信息，并将其传递给路由组件。

动态菜单

react-router-auth-plus 可以根据用户的权限动态地生成菜单。要启用动态菜单，需要在 AuthProvider 组件中设置菜单属性。

const App = () => {
  const menu = [
    {
      path: "/",
      name: "首页",
      icon: "home",
    },
    {
      path: "/dashboard",
      name: "仪表盘",
      icon: "dashboard",
      auth: true, // 需要权限才能访问
    },
    {
      path: "/settings",
      name: "设置",
      icon: "settings",
      auth: true, // 需要权限才能访问
      children: [
        {
          path: "profile",
          name: "个人资料",
        },
        {
          path: "password",
          name: "修改密码",
        },
      ],
    },
  ];

  return (
    <AuthProvider menu={menu}>
      <RouterProvider router={router} />
    </AuthProvider>
  );
};

在上面的代码中，我们创建了一个名为 menu 的数组，数组中包含了各个菜单项的信息。然后，我们在 AuthProvider 组件中设置了 menu 属性，这样就可以在路由组件中使用动态菜单了。

细粒度的权限控制

react-router-auth-plus 可以对路由权限进行细粒度的控制，比如可以控制到某个按钮的权限。要实现细粒度的权限控制，需要在路由组件中使用 AuthGuard 组件。

import { AuthGuard } from "react-router-auth-plus";

const DashboardPage = () => {
  return (
    <AuthGuard>
      <div>
        <h1>仪表盘</h1>
        <button>按钮</button>
      </div>
    </AuthGuard>
  );
};

在上面的代码中，我们使用 AuthGuard 组件包裹了 DashboardPage 组件。AuthGuard 组件会自动检查用户的权限，如果用户没有权限访问该组件，则会将其重定向到登录页面。

总结

react-router-auth-plus 是一个非常强大的路由权限管理库，它可以帮助开发者轻松地管理路由权限和动态菜单。react-router-auth-plus 的主要特点如下：

• 傻瓜式配置：react-router-auth-plus 提供了非常简单的配置方式，只需要在路由配置中添加几个属性，即可轻松地实现路由权限的管理。
• 动态菜单：react-router-auth-plus 可以根据用户的权限动态地生成菜单，这样用户只能看到自己有权限访问的菜单项。
• 细粒度的权限控制：react-router-auth-plus 可以对路由权限进行细粒度的控制，比如可以控制到某个按钮的权限，这样可以更好地保护用户的隐私和数据安全。

如果您正在寻找一个傻瓜式配置的路由权限管理库，那么 react-router-auth-plus 是一个非常好的选择。