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

一、你的苦恼~~

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

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

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

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

二、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解决流程图：

三、疾速开始

1. 装置依赖

   yarn add react-router-middleware-plus -D

   OR

   npm install react-router-middleware-plus

2. 配置路由

   /** * @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);}

3. 渲染路由

   /** * @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。