SAAS云平台搭建札记: (三) AntDesign + .Net Core WebAPI权限控制、动态菜单的生成

![](https://cloudquyan.com/media/blog/d9d20820dfb5780a/d0c835c51fecd1ea.jpg)

我们知道，当下最火的前端框架，非蚂蚁金服的 [AntDesign](https://ant.design/index-cn) 莫属，这个框架不仅在国内非常有名，在国外GitHub上React前端框架也排名第一。而且这个框架涵盖了React、Vue、Angular等多种语言，甚至有人结合.net Core 5的新特性WebAssembly 做了[Ant Design Blazor](https://github.com/ant-design-blazor/ant-design-blazor)，在此为国人点赞！

公司的新平台，用户前端界面当仁不让地使用了AntDesign for React，可以使用最新版本的特性（目前版本为4.10.1）；至于为什么不使用Ant Design Pro，是因为Pro封装的控件太多，不利于我们自定义页面。

SAAS系统，页面上首先就是权限，我们后台采用中等复杂度的RBAC控制，如图所示：

![](https://cloudquyan.com/media/blog/d9d20820dfb5780a/d524d676269104be.png)

在界面上表示，就是程序左侧的树状菜单，参照AntdPro的官方文档，[路由和菜单](https://pro.ant.design/docs/router-and-nav-cn)，需要在菜单的ts文档中写清楚各种权限组和相应菜单，显然不符合我们前后端分离使用动态菜单的方法。

![](https://cloudquyan.com/media/blog/d9d20820dfb5780a/8eaaf9857504b602.png)

因此，我研究一段时间，终于找到完全在后端生成动态菜单并且在前端的使用方法，特此分享给大家。

传递到前端的菜单实体类：

```C#
  public class 菜单实体类
    {
        public string key { get; set; }
        public string icon { get; set; }
        public string title { get; set; }
        public string link { get; set; }
        public IEnumerable<PortalMenu> children { get; set; }
    }
```

实际上是一个递归结构的json字符串：

```json
  {
    "returnCode": 0,
    "errorMsg": null,
    "data": {
        "portalMenus": [{
            "key": "R0HGQWqTzE9gzg",
            "icon": "DashboardOutlined",
            "title": "查询",
            "link": "/Wuire",
            "children": []
        }, {
            "key": "g9asSJsw9yx6w",
            "icon": "HomeOutlined",
            "title": "管理",
            "children": [{
                "key": "GBvD0rfpsYa6w",
                "title": "设定",
                "link": "/Willage",
                "children": []
            }, {
                "key": "L3LD2SrK84g",
                "title": "管理",
                "link": "/Wuse",
                "children": []
            }, {
                "key": "Wdvue6w",
                "title": "管理",
                "link": "/Wner",
                "children": []
            }]
        }, {
            "key": "R3JvXJWQk6d6A",
            "icon": "ContactsOutlined",
            "title": "",
            "children": [{
                "key": "IIJCXkQfPyzg",
                "title": "群发",
                "children": [{
                    "key": "hnhrfYWq29w",
                    "title": "邮件",
                    "link": "/Wend",
                    "children": []
                }, {
                    "key": "gF7a1XnHQ",
                    "title": "群板",
                    "link": "/Wdule",
                    "children": []
                }, {
                    "key": "a8yaA-u6PNQ",
                    "title": "历史",
                    "link": "/Wtory",
                    "children": []
                }]
            }, {
                "key": "CI03foxpw",
                "title": "群发",
                "children": [{
                    "key": "giaPpeiEoY1Rg",
                    "title": "短信",
                    "link": "/Wend",
                    "children": []
                }, {
                    "key": "ewpJBHTcZLjutGQ",
                    "title": "模板",
                    "link": "/Wuodule",
                    "children": []
                }, {
                    "key": "0B3qVuvVXpA",
                    "title": "历史",
                    "link": "/Wtory",
                    "children": []
                }]
            }, {
                "key": "7foEYA",
                "title": "信印",
                "link": "/Wurint",
                "children": []
            }]
        }, {
            "key": "f3l981rYVQ",
            "icon": "PayCircleOutlined",
            "title": "费",
            "children": [{
                "key": "DIw69fx0d3Q",
                "title": "每",
                "link": "/Wufei",
                "children": []
            }, {
                "key": "PBLCWp73mUV8kA",
                "title": "收定",
                "link": "/WMonth",
                "children": []
            }, {
                "key": "jT8bbGMc5EVIw",
                "title": "定",
                "link": "/Wting/ShowfeiXiangmu",
                "children": []
            }, {
                "key": "eUsfeeeOzbw",
                "title": "表",
                "link": "/Wufei/Daily",
                "children": []
            }]
        }, {
            "key": "RsLTvHziej3eeg",
            "icon": "ToolOutlined",
            "title": "理",
            "children": [{
                "key": "jTqs3ne_FJSxqg",
                "title": "报",
                "link": "/WuAdd",
                "children": []
            }, {
                "key": "GTJetl8mFEQ",
                "title": "馈",
                "link": "/Wudback",
                "children": []
            }, {
                "key": "MFtdebYGvg",
                "title": "询",
                "link": "/Wuyu/Inquire",
                "children": []
            }]
        }, {
            "key": "OTzJmw",
            "icon": "MailOutlined",
            "title": "理",
            "children": [{
                "key": "5x9__uzbmQ",
                "title": "发息",
                "link": "/Managend",
                "children": []
            }, {
                "key": "D6dGz0J-u98iGXw",
                "title": "盒",
                "link": "/Manage/Inbox",
                "children": []
            }, {
                "key": "xNE-jOp4khOHQ",
                "title": "群发",
                "link": "/ManagpSend",
                "children": []
            }, {
                "key": "DbIxzw6Q",
                "title": "群发",
                "link": "/ManaSend",
                "children": []
            }, {
                "key": "JRO7RUL54zaQ",
                "title": "群发",
                "link": "/ManaoupSend",
                "children": []
            }]
        }, {
            "key": "rKYgJZdxqQ",
            "icon": "TeamOutlined",
            "title": "用理",
            "children": [{
                "key": "VpTCpsvOsFyUZQ",
                "icon": "UserOutlined",
                "title": "管理",
                "link": "/Mar/List",
                "children": []
            }, {
                "key": "YVaswUMx3g",
                "icon": "ClusterOutlined",
                "title": "部管理",
                "link": "/Manist",
                "children": []
            }, {
                "key": "nYIdFQ9K0fiNiw",
                "icon": "TeamOutlined",
                "title": "用管理",
                "link": "/MapList",
                "children": []
            }, {
                "key": "5cFzOGcLIQ",
                "icon": "KeyOutlined",
                "title": "用管理",
                "link": "/Manage/UsAuthority",
                "children": []
            }]
        }, {
            "key": "ab6MCJ9hNUOIfC5ofROgOw",
            "icon": "SettingOutlined",
            "title": "系统设置",
            "children": [{
                "key": "PUGYrEbEZ6Q",
                "title": "基本设置",
                "link": "/Manaasic",
                "children": []
            }, {
                "key": "ueve6vGuOGKD8w",
                "title": "域名设置",
                "link": "/Manas/Domain",
                "children": []
            }]
        }, {
            "key": "46lZGOCDyk6saVYzZwdsJA",
            "icon": "FileTextOutlined",
            "title": "日志管理",
            "children": [{
                "key": "ZPi2io3l_EGATyr-9KFk2A",
                "title": "系统日志",
                "link": "/Manage/Log/Sys",
                "children": []
            }, {
                "key": "Ze8mGMsbmkKTXtPQ",
                "title": "操作日志",
                "link": "/Manage/Log/Operate",
                "children": []
            }]
        }],
        "defaultMenuId": "RTzE9gzg"
    }
}
```

前端页面接收后，处理下一二三级菜单，加上图标，就可以渲染出来了：

```js
  ......

state = {
    collapsed: false,
    openKeys: [],
    menus: null,
    defaultMenuId: null,
  };

async componentDidMount() {
    var menus = await getUserMenus();
    var allMenus = await this.getSubMenus(menus.portalMenus);
    this.setState({ menus: allMenus, defaultMenuId: menus.defaultMenuId });
  }

getSubMenus = (children) =>{
    let menuInfo = [];
    children.forEach(ele=>{
      if (ele.children && ele.children.length > 0) {
        menuInfo.push(<SubMenu key={ele.key} title={ele.title} icon={GetIconByName(ele.icon)}>{this.getSubMenus(ele.children)}</SubMenu>);
      } else {
        menuInfo.push(<Menu.Item key={ele.key} icon={GetIconByName(ele.icon)}><Link to={ele.link}>{ele.title}</Link></Menu.Item>);
      }
    });
    return menuInfo;
  };

render() {
    return (
      <Router>
        <Layout>
          <Sider trigger={null} collapsible collapsed={this.state.collapsed}>
            <div className="logo">
              .
            </div>
            <Menu theme="dark" mode="inline"
              defaultSelectedKeys = {[this.state.defaultMenuId]}
              openKeys={this.state.openKeys}
              onOpenChange={this.onOpenChange}>
              {this.state.menus}
            </Menu>
          </Sider>
......
```

至此，左边的菜单就按照每个人的不同权限渲染出来了。

附：前端的getUserMenus和Comm方法：

```js
  //用户取菜单
async function getUserMenus() {
    var result = await Comm(....);
    return result.data;
}

async function Comm(code, ...){
  var body = {};
  body.Code = code;
  body.data = ...;

var cookie = getCookie(global.......);
  var headers = {};
  headers["Content-Type"] = 'application/json';
  if(cookie){
    headers.token = cookie;
  }

const response = await fetch(global.webApiUrl,{
      method: 'POST',
      body: JSON.stringify(body),
      headers: new Headers(headers)
    });
  const rep = await response.json();
  return rep;
}
```

一个技术探索与知识分享的平台~

SAAS云平台搭建札记: (三) AntDesign + .Net Core WebAPI权限控制、动态菜单的生成