likes
comments
collection
share

react-router-middleware-plus开源啦 | 基于react-router v

作者站长头像
站长
· 阅读数 15

一、你的苦恼~~

你还在为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处理流程图:

react-router-middleware-plus开源啦 | 基于react-router v

三、快速开始

  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是一致的。

属性类型描述是否可选
routesRoutesMiddlewareObject[]路由配置,在RoutesObject类型上扩展了middleware属性
locationArgPartial\<Location\> \string用户传入的location对象可选
// 1. Component 渲染
// return <ReactRouterMiddleware routes={routes}></ReactRouterMiddleware>;

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

五、middleware callback介绍

这里提供下类型声明,MiddlewareFunctionRoutesMiddlewareObject

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包地址

同时非常欢迎小伙伴们提IssuesPR