“This is the first day of my participation in the Gwen Challenge in November. See details of the event: The last Gwen Challenge in 2021”.

I’ve been trying react for a long time, and recently I had some free time, so I decided to develop a backend management system to practice. The first to take out ant-design-Pro to build. Follow the guidance of the official website, set up step by step, after the successful running of the project.

The routes can be configured in the config.js file under the config folder or in the routes.js file. But the route is written in advance and fixed, I want to achieve the result of background generation of specific role related routes. So as to achieve the purpose of authority management.

Because antdPro uses umi. Umi has Settings for runtime configuration. The patchRoutes({routes}) method. And oldRender (Function) methods. To do this, add the function to the SRC /app.jsx file


export function patchRoutes({ routes }) {
  routes.unshift({
    path: '/foo'.exact: true.component: require('@/extraRoutes/foo').default,
  });
}

let extraRoutes;


export function patchRoutes({ routes }) {
  merge(routes, extraRoutes);
}


export function render(oldRender) {
  fetch('/api/routes').then(res= >res.json()).then((res) = >{ extraRoutes = res.routes; oldRender(); })}Copy the code

This method can achieve the effect of dynamic routing, but we sent a lot of routing parameters in the background. The pathRoutes () function uses a recursive method to add a route to the route. It is possible to add a route, but the resulting route cannot find the corresponding template. Since I did not study this deeply, I did not know what the problem was, so I looked for other solutions and found that antdPro provided a solution for permission management.

AntdPro Permission management solution.

Create the access.js file in the SRC /access.js SRC directory. Modify the function export default in the file to define user permissions

export default function (initialState = {}) {
  const { isAdmin, hasRoutes = [] } = initialState;
  return {
    // ...
    adminRouteFilter: () = > isAdmin, // Only administrators can access it
    normalRouteFilter: (route) = > hasRoutes.includes(route.name), // The routes contained in initialState have permission to access
  };
}

Copy the code

Then install the following method to add Access to the routing configuration

// config/config.js
import { defineConfig } from 'umi';


export default defineConfig({
  routes: [{path: '/foo'.name: 'foo'.// ...
      access: 'normalRouteFilter'.// normalRouteFilter returned from SRC /access.ts will be called for authentication
    },
    {
      path: '/admin'.name: 'admin'.// ...
      access: 'adminRouteFilter'.// The adminRouteFilter returned from SRC /access.ts is called for authentication},].// ...
});
Copy the code

This can do permission management, but not perfect, still need to list all paths, temporarily did not study the way to run through UMI configuration dynamic add routes and can load templates (not 404 pages) method.