既然是后台权限管理系统，当然少不了权限控制啦，至于权限控制，前端方面当然就是对页面资源的访问和操作控制啦。

前端资源权限主要又分为两个部分，即导航菜单的查看权限和页面增删改操作按钮的操作权限。

菜单类型 菜单类型代码页面资源的类型。类型包括，0：目录 1：菜单 2：按钮’。

数据结构例子：

权限标识 权限标识即是代表此页面资源，用来进行权限控制的唯一标识，主要是进行增删改查的权限控制。

权限标识包括，sys:user:add：新增 sys:user:edit：编辑 sys:user:delete：删除 sys:user:view：查看。 注：权限标识符可以根据实际情况 定义 例如 以上简单解释一下 下边直接上代码 提供过代码解释

第一步 我们需要具有一个权限资源列表 去管理我们所有的权限资源 包括 菜单 按钮等 这里我采用的是一个树形表格控件 menu 的数据结构对应上边的数据结构 是一个带有层级关系的一个集合

这里 添加 编辑的表单不在解释 就是简单的表单提交 这里的值 以及表格上的值 有两个作用 如果是菜单的话 这个值就是路由的最后一级。例如 ：http://localhost:8080/#/index 我们的这个值就对应index 如果是按钮的话 这个值就是主要用作标识 去识别是否显示问题

管理好我们的这个列表之后

第二步： 有自己的账号管理模块 以及角色管理模块 为自己的账号 分配角色 一般情况下 一个账号对应一个角色 这里不做主要解释

第三步： 对账号分配完角色，需要对角色分配资源，保证我们菜单以及按钮的可控性。 这里不再做过多解释，就是正常的分配权限 包括 按钮权限和菜单权限 可以同步分配。

PS:如果各位需要 第二步 第三步详细解释 我之后可以进行补充

第四步： 之前已经在登录的时候将所有的菜单权限返回出来了，不返回按钮资源是为了防止 数据往菜单显示的时候按钮资源也会显示出来 ，如若后端数据一起返回按钮资源 前端同样可以通过判断 去除按钮资源

附代码 菜单部分，（可提供到三级菜单） data 对象里的代码不在展示

fontColor 默认颜色 ffffff 这个color 监听可要可不要 ,这个监听主要是监听主题颜色变换，因为如果是白色主题 配上白色字体的话白色字体显示不出来 就去监听下 主题变换 切换字体颜色 防止出现 字体和主题颜色相近 显示不出来的情况，可以去除，只留路由监听即可。

通过监听路由 去获取该路由页面所有的被分配按钮资源，

页面操作按钮提供权限标识，查询是否在用户权限标识集合中。 在：有权限，可见或可用，不在：无权限，不可见或禁用。 目前本系统采用的是 按钮标识如果不在权限集合中则不显示 ，反之 则显示。

KtButton.vue 公共按钮组件