DataEase二开记录--踩坑和详细步骤(三)增加权限功能

文章介绍了如何在DataEase开源版本中添加权限管理功能,通过创建sys_user_menu表并结合sys_menu表实现用户等级与页面访问的对应。通过动态加载页面时加入用户等级判断,达到不同用户看到不同页面的效果,从而满足基本的权限需求。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

在这里插入图片描述
浏览用户只能看大屏

普通用户没有系统管理

动机

这篇文章是关于dataease的权限管理的,开源版本是没有权限管理的,任何账号看到的东西都一样,显然,这不能满足正常的使用。因此要对不同的账号做权限分层管理,不同的账号看到不同的页面,实现不同的功能

建议

建议先浏览一下前面两篇
DataEase二开记录–踩坑和详细步骤(一)
https://blog.csdn.net/weixin_45399602/article/details/129518697
DataEase二开记录–踩坑和详细步骤(二)
https://blog.csdn.net/weixin_45399602/article/details/129519155

吐槽一句,这文章刚写完,就被抄袭了,一字不差,还抹去了作者的信息。。。



开始正文

登录

先从登录开始,看一下接口

image-20230324154041373
那就去找这个接口

image-20230324161939617

接着去找对用的server

image-20230324162441156

只能找到关于登录验证的部分,说明我们找的接口有问题。那就重新看登录页面。

menus 似乎有东西

image-20230324162623206

继续看它的perview

image-20230324162745834
打开自己细看,能看到 仪表盘 等页面内容,似乎有东西,那就去看看这个接口。

按照上面的方法,找到 DynamicMenuApi,继续找 server,

  public List<DynamicMenuDto> menus() {
        return dynamicMenuService.load(null);
    }

很明显这就是动态加载页面的,而且参数直接给了null,也许本来是有的,这里直接给了null,那正好可以用上,符合 我们根据用户ID 来加载 页面的需求。

在 interface 层全是可以看到原来是userId的参数的,如下

List<DynamicMenuDto> load(String userId);

去对对应的impl层,看一下load具体怎么操作的

  public List<DynamicMenuDto> load(String userId) {
        List<SysMenu> sysMenus = extSysMenuMapper.querySysMenu();
        List<DynamicMenuDto> dynamicMenuDtos = sysMenus.stream().map(this::convert).collect(Collectors.toList());
        //增加插件中的菜单
        List<PluginSysMenu> pluginSysMenus = PluginUtils.pluginMenus();
        if (CollectionUtils.isNotEmpty(pluginSysMenus)) {
            pluginSysMenus = pluginSysMenus.stream().filter(menu -> menu.getType() <= 1).collect(Collectors.toList());
            List<DynamicMenuDto> pluginDtos = pluginSysMenus.stream().map(this::convert).collect(Collectors.toList());
            dynamicMenuDtos.addAll(pluginDtos);
        }
        dynamicMenuDtos = dynamicMenuDtos.stream().sorted((s1, s2) -> {
            int sortIndex1 = null == s1.getMenuSort() ? 999 : s1.getMenuSort();
            int sortIndex2 = null == s2.getMenuSort() ? 999 : s2.getMenuSort();
            return sortIndex1 - sortIndex2;
        }).collect(Collectors.toList());
        dynamicMenuDtos.sort((s1, s2) -> s1.getHidden().compareTo(s2.getHidden()));
        return buildTree(dynamicMenuDtos);
    }

秘密全都在这里了,在这里加载了所有的页面。

extSysMenuMapper.querySysMenu() 这里查了所有的页面。
看了一下对应的表 sys_menu

image-20230324164421544

一看表,这不要太爽,都拆分开来了。

思路

发现sys_menu表是把各个页面拆开的,menu_id 是页面ID,pid表示父页面ID,这个就极大的便捷了开发的方式。

利用这个表,我加了一个表sys_user_menu表,只有两个字段,menu_id 和 userLevel (表示用户等级),这里我只简单的分为两个等级,“普通用户” 和 “管理用户”。

这样只需要个用户添加一个 userLevel 字段,就可以对应起来,实现 每个用户的权限不同了。

当然对应的前端也要修改,给默认值

接着就是通过接口查看是怎么登录和加载页面的了,通过查看登录接口,以及server层,可以看到是根据登录用户信息动态加载页面的,这正好可以和前文的思路吻合。

梳理一下

整体来说,有以下几处需要改的:

①加一个sys_user_menu表

②动态加载页面的时候加一个join sys_user_menu表

③前端页面在新建用户的时候加一个选择用户等级


按照这个思路,我已经完成了简单的权限管理,实现了不同等级的用户权限不同。
具体步骤就不写了,欢迎私信我。

### DataEase 二次开发指南 DataEase 是一款源的数据可视化平台,支持多种数据源接入丰富的图表展示功能。对于希望扩展其核心功能开发者来说,掌握二次开发的方法至关重要。 #### 获取官方文档支持材料 为了更好地理解如何进行二次开发,建议先熟悉官方提供的API文档其他支持材料[^1]。这些资源通常包含了详细的接口说明、参数定义以及调用示例等内容,能够帮助开发者快速上手并解决常见问题。 #### 设置开发环境 在始之前,确保已经安装了必要的依赖项,并配置好本地开发环境。这可能涉及到下载特定版本的Java SDK, Node.js以及其他相关工具链。此外,还需要克隆最新的DataEase仓库至本地以便于后续操作[^2]。 #### 探索现有插件机制 DataEase 支持通过编写自定义插件来实现个性化需求。研究现有的插件结构及其工作原理可以为创建新的组件提供宝贵的经验借鉴。例如,查看`plugins`目录下的各个子文件夹可以帮助了解不同类型的插件是如何被组织起来并与主程序交互工作的[^3]。 #### 实践案例分析 实际动手尝试构建一个小规模的应用场景有助于加深对整个流程的理解。可以从简单的修改界面样式入手,逐步过渡到更复杂的业务逻辑处理。比如增加一个新的仪表板视图或者集成第方服务API等都是不错的练习方向[^4]。 ```javascript // 插入一段JavaScript代码作为例子 const fetchData = async () => { try { let response = await fetch('https://api.example.com/data'); if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`); const data = await response.json(); console.log(data); } catch (error) { console.error('Failed to get data:', error.message); } }; ```
评论 17
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值