react动态路由 - 技术栈

框架的权限控制（在config.ts中配置）

复制代码

export default {
  access: {},
};

权限配置文件（access.ts）

新建 src/access.ts ，在该文件中 export default 一个函数，定义用户拥有的权限

该文件需要返回一个 function，返回的 function 会在应用初始化阶段被执行，执行后返回的对象将会被作为用户所有权限的定义。对象的每个 key 对应一个 boolean 值，只有 true 和 false，代表用户是否有该权限

1.定义normalroutes数组，包含普通用户默认访问的页面

复制代码

 const normalRoutes = ['dashboard', 'user']; // 普通用户默认权限

2.定义adminroutes数组，包含管理员默认访问的页面

复制代码

const adminRoutes = ['admin', 'settings', 'card', 'list.table-list', 'class', 'study', 'goods', '商品管理', '订单管理', '轮播管理'];

3.定义adminroutes数组，包含所有用户默认访问的页面

复制代码

const allUserRoutes = ['welcome'];

4.根据用户是否是管理员，合并normalroutes得到hasRoutes数组

复制代码

const hasRoutes = isAdmin ? [...normalRoutes, ...adminRoutes] : normalRoutes;

  return {
    adminRouteFilter: () => isAdmin,
    normalRouteFilter: (route) => hasRoutes.includes(route.name),
    allUserRouteFilter: (route) => allUserRoutes.includes(route.name),
  };
}

路由配置文件

在每个路由中使用相应的权限过滤规则，需要按以下方式在常规路由配置中加上 access 这一项

复制代码

/**
 * @name umi 的路由配置
 * @description 只支持 path,component,routes,redirect,wrappers,name,icon 的配置
 * @param path  path 只支持两种占位符配置，第一种是动态参数 :id 的形式，第二种是 * 通配符，通配符只能出现路由字符串的最后。
 * @param component 配置 location 和 path 匹配后用于渲染的 React 组件路径。可以是绝对路径，也可以是相对路径，如果是相对路径，会从 src/pages 开始找起。
 * @param routes 配置子路由，通常在需要为多个路径增加 layout 组件时使用。
 * @param redirect 配置路由跳转
 * @param wrappers 配置路由组件的包装组件，通过包装组件可以为当前的路由组件组合进更多的功能。 比如，可以用于路由级别的权限校验
 * @param name 配置路由的标题，默认读取国际化文件 menu.ts 中 menu.xxxx 的值，如配置 name 为 login，则读取 menu.ts 中 menu.login 的取值作为标题
 * @param icon 配置路由的图标，取值参考 https://ant.design/components/icon-cn， 注意去除风格后缀和大小写，如想要配置图标为 <StepBackwardOutlined /> 则取值应为 stepBackward 或 StepBackward，如想要配置图标为 <UserOutlined /> 则取值应为 user 或者 User
 * @doc https://umijs.org/docs/guides/routes
 */
// 引入常量
import { ADMIN_PAGE, SETTINGS_PAGE, CARD_PAGE, LIST_TABLE_LIST_PAGE, CLASS_PAGE, STUDY_PAGE, GOODS_PAGE, GOODS_MANAGEMENT_PAGE, ORDER_MANAGEMENT_PAGE, BANNER_MANAGEMENT_PAGE } from './access';

export default [
  {
    path: '/user',
    layout: false,
    routes: [
      {
        name: 'login',
        path: '/user/login',
        component: './User/Login',
        access: 'adminRouteFilter',
      },
    ],
  },
  {
    path: '/welcome',
    name: 'welcome',
    icon: 'crown',
    component: './Welcome',
    access: 'allUserRouteFilter',
  },
  {
    path: '/card',
    name: CARD_PAGE,
    icon: 'smile',
    component: './Card',
    access: 'adminRouteFilter',
  },
  {
    path: '/admin',
    name: ADMIN_PAGE,
    icon: 'crown',
    access: 'adminRouteFilter',
    routes: [
      {
        path: '/admin',
        redirect: '/admin/sub-page',
        access: 'normalRouteFilter',
      },
      {
        path: '/admin/sub-page',
        name: 'sub-page',
        component: './Admin',
        access: 'normalRouteFilter',
      },
    ],
  },
  {
    name: LIST_TABLE_LIST_PAGE,
    icon: 'table',
    path: '/list',
    component: './TableList',
    access: 'adminRouteFilter',
  },
  {
    name: CLASS_PAGE,
    icon: 'crown',
    path: '/class',
    component: './Class',
    access: 'adminRouteFilter',
  },
  {
    path: '/study',
    name: STUDY_PAGE,
    icon: 'table',
    component: './Study',
    access: 'adminRouteFilter',
  },
  {
    path: '/goods',
    name: GOODS_PAGE,
    icon: 'smile',
    component: './Goods',
    access: 'adminRouteFilter',
  },
  {
    path: '/Controls',
    name: GOODS_MANAGEMENT_PAGE,
    icon: 'table',
    access: 'adminRouteFilter',
    routes: [
      {
        path: '/Controls/list',
        name: '商品列表',
        component: './Controls/list',
        access: 'adminRouteFilter',
      },
      {
        path: '/Controls/rubbish',
        name: '商品回收站',
        component: './Controls/rubbish',
        access: 'adminRouteFilter',
      },
    ],
  },
  {
    path: '/order',
    name: ORDER_MANAGEMENT_PAGE,
    icon: 'smile',
    component: './order',
    access: 'adminRouteFilter',
  },
  {
    path: '/banner',
    name: BANNER_MANAGEMENT_PAGE,
    icon: 'crown',
    component: './banner',
    access: 'adminRouteFilter',
  },
  {
    path: '/',
    redirect: '/welcome',
  },
  {
    path: '*',
    layout: false,
    component: './404',
  },
];