一、你的苦恼~~

你还在为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: ,

    children: [

      {

        index: true,

        key: 'home',

        element: 

      },

      {

        path: 'admin',

        key: 'admin',

        // 中间件,允许配置一个或多个

        middleware: [

          checkLogin,

          checkLogin,

          // auth3

          // ...

        ],

        element: 

      }

    ]

  },

  {

    path: '/login',

    key: 'login',

    element: 

  },

]

middleware:

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

middleware处理流程图:

KIM20220608-209957.png

三、快速开始

安装依赖yarn add react-router-middleware-plus -DORnpm 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: ,

      children: [

        {

          index: true,

          key: 'home',

          element: 

        },

        {

          path: 'admin',

          key: 'admin',

          // middleware中callback从左到右依次执行

          middleware: [checkLogin, checkRole],

          element: 

        }

      ]

    },

    {

      path: '/login',

      key: 'login',

      element: 

    },

  ];

  

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

  

  // 1. Component 渲染

  // return ;

  

  // 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(

  

    

  

);

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

四、Props介绍

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

属性类型描述是否可选routesRoutesMiddlewareObject[]路由配置,在RoutesObject类型上扩展了middleware属性否locationArgPartial | string用户传入的location对象可选

// 1. Component 渲染

// return ;

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

好文推荐

评论可见,请评论后查看内容,谢谢!!!
 您阅读本篇文章共花了: