开源框架若依中的权限控制逻辑-菜单

起源

目前我司生产环境使用的后台服务系统为：后端国产开源框架jfinal+前端开源框架vue-element-admin组成的前后端分离的综合管理系统。目前该套系统已实现约两三个子功能模块。

上周需求方提出，需要给后台管理系统增加上权限管理功能，经过调研发现，若依框架中的权限管理比较符合需求方理想中的权限管理，因此对若依中的权限管理展开了学习。

若依系统中的角色管理

下载若依系统源码后，按照官网文档中的提示，配置数据库、端口等，我们分别打开前后端项目，如图所示：

前端项目目录如下图：

我们分别运行前后端：

后端运行入口为ruoyi-admin模块的RuoYiApplication.java；

前端在ruoyi-ui目录下执行命令：npm run dev。

运行结果，可以在浏览器中查看到如下页面：

输入验证码后进入系统，页面如下：

可以看到，其系统管理大致分为用户管理、角色管理、菜单管理，部门管理，岗位管理等。

今天我们先来看一下其中的菜单管理。主页面如图所示：

新增功能分为新增目录，新增菜单，新增按钮，如图所示为新增目录的窗口：

新增菜单时的窗口如下：

新增按钮的窗口如下所示：

相比目录来说，新增菜单多了四个需要填写的内容，分别是组件路径，权限字符，路由参数，是否缓存。新增按钮功能相比目录增加了权限字符。

我们分别操作尝试一下：

操作完后，我们刷新页面：

可以看到，左侧新增了“测试目录”这一目录，但是点开并没有子菜单。我们经过测试，发现，只有将“测试菜单”的权限修改为目前已经可以查看的一个权限字符，并且将其路由参数设为空时，左侧菜单栏才会有“测试菜单”出现。

有过vue前端开发经验的人应该对权限字符并不陌生，它表示一个菜单我们是否有权查看，其位于路由组件部分的permissions字段中。

路由参数是什么意思呢？为什么写了路由参数的菜单不会默认出现在左侧栏中呢？时间关系，我们另外再阐述。