​

一、你的苦恼~~

你还在为​​react-router​​的路由权限控制而烦恼吗？

你还在翻遍了社区react路由权限相关文章发现都是V4、V5版本的而烦恼吗？

你还在为自行适配react-router v6版本的权限步骤繁杂，多重鉴权逻辑嵌套而烦恼吗？

他来了！他来了！他带着礼物走来了！​​​react-router-middleware-plus​​​专为解决你的烦恼而生！

二、react-router-middleware-plus

​​react-router-middleware-plus​​​是基于react-router v6的路由权限配置开源库，引入中间件​​middleware​​的概念，零成本式路由权限解决方案。

​​midleware​​​定义为中间件的概念，是包含了一个或多个用户自定义的​​auth callback​​​的数组，在页面路由加载时，会依次执行中间件中的​​auth callback​​​。如果你想拦截路由在​​auth callback​​中直接返回false即可，如果允许通过返回true即可。

middleware处理流程图：

以业务流程举例说明：

路由组件配置声明：

如何来配置中间件呢，非常的简单，只需要在原有定义路由的地方，增加​​middleware​​参数即可。

/**
 * @description 路由配置
 *
*/
const routes = [
  {
    path: '/',
    key: 'index',
    element: <App></App>,
    children: [
      {
        index: true,
        key: 'home',
        element: <Home></Home>
      },
      {
        path: 'admin',
        key: 'admin',
        // 中间件，允许配置一个或多个
        middleware: [
          checkLogin,
          checkRole,
          // auth3
          // ...
        ],
        element: <Admin></Admin>
      }
    ]
  },
  {
    path: '/login',
    key: 'login',
    element: <Login></Login>
  },
]

middleware是可选的，只需要在需要他的地方添加即可，middleware callback允许添加多个，从左到右依次执行，你可以根据业务需求任意组合权限校验。

三、快速开始

1. 安装依赖

yarn add react-router-middleware-plus -D

OR

npm install react-router-middleware-plus

1. 配置路由

/**
 * @file: router.tsx 路由配置组件
 * @author: huxiaoshuai
*/
import React from 'react';
import { useNavigate } from 'react-router-dom';
import { ReactRouterMiddleware, useMiddlewareRoutes } from 'react-router-middleware-plus';
import App from './App';
import Home from './home';
import Login from './login';
import Admin from './admin';

export default function Router () {
  const navigate = useNavigate();

  /**
   * @method checkLogin
   * @description 鉴权-登录
  */
  const checkLogin = () => {
    // 获取登录信息
    const isLogin = !!localStorage.getItem('username')

    if (!isLogin) {
      navigate('/login', {
        replace: true
      })
      return false;
    }
    return true
  }

  /**
   * @method checkRole
   * @description 鉴权-用户角色
  */
  const checkRole = () => {
    // 根据自己的页面，判断处理，async/await异步拉取用户数据即可。
    const isAdmin = localStorage.getItem('role') === 'admin';

    if (!isAdmin) {
      navigate('/', {
        replace: true
      })
      // 未通过鉴权，返回false
      return false;
    }

    // 通过鉴权，返回true
    return true
  }

  // 定义路由配置，与react-router-dom是一致的，只是新增了middleware参数，可选
  // middleware中的鉴权逻辑callback，是从左向右依次调用的，遇到第一个返回false的callback会拦截路由组件的渲染，走callback中用户自定义逻辑

  /**
   * @description 路由配置
   *
  */
  const routes = [
    {
      path: '/',
      key: 'index',
      element: <App></App>,
      children: [
        {
          index: true,
          key: 'home',
          element: <Home></Home>
        },
        {
          path: 'admin',
          key: 'admin',
          // middleware中callback从左到右依次执行
          middleware: [checkLogin, checkRole],
          element: <Admin></Admin>
        }
      ]
    },
    {
      path: '/login',
      key: 'login',
      element: <Login></Login>
    },
  ];

  // 生成路由配置由两种方式：Component  或者是使用Hook useMiddlewareRoutes

  // 1. Component 渲染
  // return <ReactRouterMiddleware routes={routes}></ReactRouterMiddleware>;

  // 2. Hook渲染
  return useMiddlewareRoutes(routes);
}

1. 渲染路由

/**
 * @file index.tsx 入口文件
 * @author huxiaoshuai
*/
import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom';
import Router from './router';


ReactDOM.createRoot(document.getElementById('root')!).render(
  <BrowserRouter>
    <Router />
  </BrowserRouter>
);

对，是的，就是这么简单！就通过配置middleware，灵活搭配组合callback，在callback中自定义处理逻辑，路由权限处理问题解决了

四、Props介绍

​​react-router-middleware-plus​​​在使用时和react-router-dom中的​​useRoutes​​是一致的。

// 1. Component 渲染
// return <ReactRouterMiddleware routes={routes}></ReactRouterMiddleware>;

// 2. Hook渲染
return useMiddlewareRoutes(routes);

五、middleware callback介绍

这里提供下类型声明，​​MiddlewareFunction​​​和​​RoutesMiddlewareObject​​。

export interface MiddlewareFunction {
  (): boolean
}

export interface RoutesMiddlewareObject extends RouteObject  {
  /**
   * @description 权限处理的middleware callback[]
   *
  */
  middleware?: MiddlewareFunction[];
  /**
   * @description 子路由
   *
  */
  children?: RoutesMiddlewareObject[];
}

再次强调一下，如果拦截路由就在​​MiddlewareFunction​​​中返回​​false​​​,如果通过就是返回​​true​​。

六、求Star

如果你通过使用​​react-router-middleware-plus​​​解决了路由配置鉴权问题，欢迎你点个​​Star​​。

GitHub仓库地址

NPM包地址

同时非常欢迎小伙伴们提​​Issues​​​和​​PR​​。