Ant design pro v4-服务器菜单和路由权限控制

要解决的问题：ant design pro默认情况下，菜单和路由都用配置的方式，在前端的config/config.ts中配置。但是大多数后台系统都需要由后端服务器控制权限。

类似的需求一般包括两点：

1、“只看该看的，防君子”：不同角色对应不同菜单，在用户登录时，由服务器根据登录用户的角色生成菜单；有权限的菜单显示，没权限的菜单隐藏。

2、“想看也不行，防小人”：防止用户直接通过在浏览器中输入未授权菜单的path进行访问。

Ant design pro v4版本的官方上，简单说明了从服务器拉取菜单的方法，但是说得很简略，对新手来说还要自己摸索一番。而且这个方案，只能实现上面提到的第1条，只要path被用户知道了，仍然可以强行输入path进行访问。在网上查了半天，才找到解决第2条的方法——动态更新路由。下面就把我的经验分享给大家，不对之处还望指出，不吝赐教。

拉取服务器菜单

1. 实现menuModel，在src\models下，添加menu.ts

import { Effect } from 'dva';
import { Reducer } from 'redux';
import { getMenuData } from '@/services/menu';


export interface MenuModelState {
  menuData?: any[];
}

export interface MenuModelType {
  namespace: 'menu';
  state: MenuModelS