权限控制方案
既然是后台权限管理系统，当然少不了权限控制啦，至于权限控制，前端方面当然就是对页面资源的访问和操作控制啦。
前端资源权限主要又分为两个部分，即导航菜单的查看权限和页面增删改操作按钮的操作权限。
菜单类型
菜单类型代码页面资源的类型。类型包括，0：目录 1：菜单 2：按钮’。
根据为不同角色分配相应的资源进行展示不同的导航菜单 以及按钮形式。角色分配的有哪些菜单或者按钮，页面显示出相应的菜单或者按钮。（只解释前端部分，以及数据结构样式，可让后端根据数据结构进行处理数据。） 数据结构例子：
文章图片
登录的时候将该账号对应的角色所具有的权限返回出来 存到sessionStorage 或者vuex里边进行存储，注意：为了区分开菜单资源和按钮资源 防止登录的时候资源对菜单照成影响 导致按钮资源出现在菜单上 用menuTypeCn 这个资源类型字段区分。登录的时候只需要将所有的菜单权限展示出来就行了。然后根据菜单 查出来该菜单下的按钮。 权限标识
权限标识即是代表此页面资源，用来进行权限控制的唯一标识，主要是进行增删改查的权限控制。
权限标识包括，sys:user:add：新增 sys:user:edit：编辑 sys:user:delete：删除 sys:user:view：查看。
注：权限标识符可以根据实际情况 定义 例如
文章图片
以上简单解释一下 下边直接上代码 提供过代码解释
第一步 我们需要具有一个权限资源列表 去管理我们所有的权限资源 包括 菜单 按钮等
这里我采用的是一个树形表格控件
文章图片
menu 的数据结构对应上边的数据结构 是一个带有层级关系的一个集合
{{scope.row.menuName}}
{{scope.row.menuTypeCn}}
{{scope.row.menuCode}}
{{scope.row.menuIcon}}
{{scope.row.menuSequence}}
这里 添加 编辑的表单不在解释 就是简单的表单提交
文章图片
这里的值 以及表格上的值 有两个作用 如果是菜单的话 这个值就是路由的最后一级。例如 ：http://localhost:8080/#/index 我们的这个值就对应index
如果是按钮的话 这个值就是主要用作标识 去识别是否显示问题
管理好我们的这个列表之后
第二步：
有自己的账号管理模块 以及角色管理模块 为自己的账号 分配角色 一般情况下 一个账号对应一个角色
这里不做主要解释
第三步：
对账号分配完角色，需要对角色分配资源，保证我们菜单以及按钮的可控性。
这里不再做过多解释，就是正常的分配权限 包括 按钮权限和菜单权限 可以同步分配。
PS:如果各位需要 第二步 第三步详细解释 我之后可以进行补充
第四步：
之前已经在登录的时候将所有的菜单权限返回出来了，不返回按钮资源是为了防止 数据往菜单显示的时候按钮资源也会显示出来 ，如若后端数据一起返回按钮资源 前端同样可以通过判断 去除按钮资源
附代码 菜单部分，（可提供到三级菜单） data 对象里的代码不在展示
{{item.menuName}}
{{item.menuName}}
{{itemChild.menuName}}
{{itemChild.menuName}}
{{itemChild_Child.menuName}}
{{itemChild.menuName}}
{{item.menuName}}
fontColor 默认颜色 ffffff
这个color 监听可要可不要 ,这个监听主要是监听主题颜色变换，因为如果是白色主题 配上白色字体的话白色字体显示不出来 就去监听下 主题变换 切换字体颜色 防止出现 字体和主题颜色相近 显示不出来的情况，可以去除，只留路由监听即可。
mounted(){
this.menu = JSON.parse(sessionStorage.getItem('MenuList'))
this.routter = this.$router.currentRoute.path.slice(1)
},
watch: {
color(curVal,oldVal){
let col= curVal.replace('#',"")
if(this.hex2int(col) > this.hex2int('66FFFF')){
this.fontColor = '#000000'
}else{
this.fontColor = '#ffffff'
}
},
$route(to,form){
this.routter = to.path.slice(1)
this.getBtn(this.routter)
}
},
methods: {
getBtn(router){
queryMenuButton({userId:JSON.parse(sessionStorage.getItem('userInfo')).id,menuCode:router}).then(res => {
if(res.status == 200){
sessionStorage.setItem('btnList',JSON.stringify(res.data))
}
})
},
}
通过监听路由 去获取该路由页面所有的被分配按钮资源，
页面操作按钮提供权限标识，查询是否在用户权限标识集合中。
在：有权限，可见或可用，不在：无权限，不可见或禁用。
目前本系统采用的是 按钮标识如果不在权限集合中则不显示 ，反之 则显示。
KtButton.vue 公共按钮组件
{{label}}
组件的引用 注册代码分别是
import KtButton from '@/components/KtButton.vue'
components:{
KtButton
}
使用过程
表格里的使用方法 其中 perms 参数 是我们主要传的标识符 perms=‘acc:rule:edt’ 其中 acc:rule:edt是我们自己在菜单权限管理列表的时候实现定义好的 标识符 ，原则上是随便定义 但是最好定义这种大家一眼就能看明白是什么意思。
文章图片
拿这个标识符去跟自己权限资源集合里的按钮 按钮资源进行比对 如果有 就显示 没有就不显示。 具体判断代码是在KtButton.vue组件里。
具体判断 代码
hasPermission (perms) {
let hasPermission = false
let permissions = JSON.parse(window.sessionStorage.getItem('btnList'))
for(let i=0;
i其中 permissions就是所有的该角色所具有的按钮资源的集合，是我们比对的对象。sessionStorage对象里的btnList 在之前我们进行监听路由的时候给存入进去的 该路由（页面）下 角色所具有的按钮资源集合。
通过组件传值 perms 把标识符传过去 进行比对 就可以通过分配权限，正常控制按钮的显示与隐藏。
注意
这个传值的标识符 一定是我们权限管理模块 里边事先定义好的 我们定义什么标识符 这边传什么标识符。
例如：
文章图片
文章图片
有什么遗漏的地方 欢迎大家批评。
有什么想深入了解的同样可以评论 私信呢！！！
【vue|Vue + Element UI 实现权限管理系统（页面权限控制（菜单 + 按钮））】最后希望大家虎年大吉喜气扬,虎头扬扬好运来,虎眼圆圆看祥瑞,虎须翘翘钱满园,虎身摆摆业登高,虎尾扫扫体健安,虎声震震尽欢颜,祝愿虎年多财气,旺虎载运福满天!
推荐阅读
- 趣学Java|干掉Session（这个跨域认证解决方案真的优雅）
- Vue 状态管理与与SSR详解
- Java|Redis Pipeline原来是这么用的
- 最好用的 7 个 Vue Tree select 树形组件 - 卡拉云
- 工具|StreamLit构造Web应用
- vue原理初探
- 前端|ApiPost中的Mock如何使用
- js 根据n年第n周，获取此周的开始和结束日期
- C#小游戏|飞行棋（C#）