UMI动态路由

基于umi4.0，动态路由是运行时配置，官网文档

动态路由的两种配置方式

第一种

• 配置项里面的routes字段不能为空，可以先配置几个公共的路由

• 在app.tsx里面设置两个函数 patchClientRoutes和render，并export出去

  

  render函数是用来请求后端数据，拿到对应的路由。这个函数会接收一个参数，也是一个函数，在接口请求完成后执行下就可以
  接着会执行patchClientRoutes这个函数，这个函数会接收一个参数，里面有routes路由这个字段，把后端返回的数据整理下，放到routes里面，就配置好了动态路由

第二种

• 配置项里面把所有路由都写好，注意要加上权限字段

  export const routes = [
    {
    	name: '权限测试',
      path: '/pageA',
      component: 'PageA',
      access: 'canReadPageA', // 权限定义返回值的某个 key
    },
  ];
  

• 在src/app.tsx里面需要有getInitialState这个函数
  
• umi约定了在src/access.ts文件里定义权限

  // src/access.ts 
  export default function (initialState) {
    // router 是上面getInitialState函数返回的
    const { router } = initialState;
    
   // 这里接口返回的路由数据和本地配置好的路由对比下，看哪些页面有权限
   ···········
  
   // 需要返回一个对象，key就是上面路由配置的 access 字段的值
    return {
      canReadPageA: true, // 值是true或者false ，
      //canReadPageA: ()=>false, // 是一个函数也行，函数返回一个布尔值
    };
  }