abp & ng-alain 改造前端 十五 —— 菜单

---

介绍

ABP 是 ASP.NET Boilerplate Project(Asp.net 样板项目)的简称，网址:http://aspnetboilerplate.com/。
ng-alain 是基于 antd 中后台前端解决方案,网址:https://ng-alain.com/。
官方网页下载的项目的angular项目是基于(AdminBSB:https://github.com/gurayyarar/AdminBSBMaterialDesign)

1. 目录:https://www.jianshu.com/p/589af988637c
2. 源代码:https://github.com/ZhaoRd/abp-alain

---

功能

该功能是通过设置菜单的权限，根据当前登陆者的角色权限，显示不同的菜单

angular项目实现方式

       new MenuItem(this.l("Tenants"), "Pages.Tenants", "business", "/app/tenants"),
        new MenuItem(this.l("Users"), "Pages.Users", "people", "/app/users"),
        new MenuItem(this.l("Roles"), "Pages.Roles", "local_offer", "/app/roles"),

ng-alain 改造实现

由于 ng-alain项目是通过读取app-data.json文件 中定义的菜单信息，所以需要修改app-data.json中的菜单信息，提供权限定义功能，修改完成的菜单项如下

菜单权限
在配置项中增加 permissions 项

为了是定义的菜单生效，我们需要在程序启动的时候，设置菜单项为隐藏还是显示
修改文件app.module.ts，等待ng-alain资源和abp资源加载完毕后设置菜单显示项
代码如下

export function StartupServiceFactory(
  injector: Injector,
  startupService: StartupService,
): Function {
  return () =>
    startupService
      .load().then(() => {

        // 初始化消息类通知
        const abpMessage = injector.get(AbpMessage);
        abpMessage.init();

        // 初始化abp
        return new Promise<boolean>((resolve, reject) => {
          AppPreBootstrap.run(() => {
            abp.event.trigger('abp.dynamicScriptsInitialized');

            const appSessionService: AppSessionService = injector.get(
              AppSessionService,
            );

            appSessionService.init().then(
              result => {
                resolve(result);
              },
              err => {
                reject(err);
              },
            );
          });
        });
      })
      .then(() => {

        /**
        * 根据权限修改菜单是否显示
        * @param menus 
        */
        function checkMenuPerssion(menus) {
          _.forEach(menus, (item) => {

            item.hide = item.permissions && !abp.auth.isGranted(item.permissions);

            if (item.children != undefined && item.children.length > 0) {
              checkMenuPerssion(item.children);
            }
          });
        }

        
        // 验证菜单权限
        var menuService: MenuService = injector.get(MenuService);
        var menus = menuService.menus;
        
        checkMenuPerssion(menus);

        // 需要重新设置菜单
        menuService.clear();
        menuService.add(menus);

      });
}

---

运行结果

新增testone角色，权限只勾选Users，新建testone用户，使用testone用户登录系统。
管理员登录界面如下

管理员菜单

新增角色和用户

新增角色
新增用户--基础信息
新增用户--角色信息

使用testone用户登陆过后的菜单如下图

testone菜单

可以看到 testone 中的菜单没有租户管理和角色管理

---

我的公众号

我的公众号

---

源代码

源代码:https://github.com/ZhaoRd/abp-alain