react-router-middleware-plus开源啦 | 基于react-router 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&