关于react.js:reactroutermiddlewareplus开源啦-基于reactrouter-v6的零成本式路由权限解决方案

你还在为 react-router 的路由权限管制而懊恼吗？

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

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

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

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

路由组件申明：

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

  if (!isLogin) {
    navigate('/login', {replace: true})
    // 未通过鉴权，返回 false
    return false;
  }
  
  // 通过鉴权，返回 true
  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
}

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

middleware：

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

middleware 解决流程图：

装置依赖

yarn add react-router-middleware-plus -D

npm install react-router-middleware-plus

配置路由

/**
 * @file: router.tsx 路由配置组件
 * @author: huxiaoshuai
*/
import React from 'react';
import {useNavigate} from 'react-router-dom';
import {ReactRouterMiddleware, useMiddlewareRoutes} from 'react-roouter-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);
}

渲染路由

/**
 * @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 中自定义解决逻辑，路由权限解决问题解决了

react-router-middleware-plus在应用时和 react-router-dom 中的 useRoutes 是统一的。

属性	类型	形容	是否可选
routes	RoutesMiddlewareObject[]	路由配置，在 RoutesObject 类型上扩大了 `middleware` 属性	否
locationArg	Partial\<Location\> \	string	用户传入的 location 对象	可选

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

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

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

export interface MiddlewareFunction {(): boolean
}

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

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

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

GitHub 仓库地址

NPM 包地址

同时十分欢送小伙伴们提 Issues 和PR。

关于react.js:reactroutermiddlewareplus开源啦-基于reactrouter-v6的零成本式路由权限解决方案

一、你的苦恼~~

二、react-router-middleware-plus

三、疾速开始

四、Props 介绍

五、middleware callback 介绍

六、求 Star