前端关于web管理端按钮权限的判断,终于会了!!!
管理端项目牵涉到多种角色的登录,进而需要很多判断权限的问题,例如菜单权限、按钮权限等。这个问题在我第一份工作的时候并没有实现,所以心有遗憾,后来第二份工作中关于按钮和菜单的权限是每处去比对判断的,总觉得不是最合适的方法,作为有经验的前端(吹嘘一番而已,此处省略3个字.....😂),应该考虑到的是用最少的代码实现最广泛的功能,而不是在改动的时候需要每一处都修改,没有任何“框架”的思想,,所以废话不多说了,开始吧。
菜单权限和按钮权限都是需要这些步骤:
- 拿到能看到的菜单或者按钮的列表
- 当前按钮和菜单的权限
- 判断当前权限是否在能够看到的权限列表里面
在用户请求login接口时,返回的信息中有buttonRoleList信息,这里是按钮权限的信息,里面是所有当前用户的按钮权限,数据类型如
![](https://img2020.cnblogs.com/blog/1801750/202010/1801750-20201011101600287-543451093.png)
登录时获取到buttonRoleList后须要将数据存储在vuex中,且调用createStyle操作,createStyle的方法实现如下:
1 export function createStyle (styleList, styleid = 'styleBtnRole') { 2 // 先更新按钮角色列表 3 buttonRoleList = styleList; 4 // 在页面head中增加id为styleBtnRole的style样式 5 var head = document.getElementsByTagName('head')[0]; 6 var styleBtnRole = document.getElementById(styleid); 7 if (styleBtnRole) { 8 head.removeChild(styleBtnRole); 9 } 10 if (styleList.length) { 11 styleBtnRole = document.createElement('style'); 12 styleBtnRole.id = styleid; 13 styleBtnRole.type = 'text/css'; 14 // 样式中是遍历增加class为buttonRoleList中每一项的样式 15 var cssText = ''; 16 styleList.forEach(style => { 17 cssText += '.' + style + '{transform: scale(1);-webkit-transform: scale(1);}'; 18 }); 19 if (styleBtnRole.styleSheet) { // IE 20 styleBtnRole.styleSheet.cssText = cssText; 21 } else { // w3c 22 // w3c浏览器中只要创建文本节点插入到style元素中就行了 23 var textNode = document.createTextNode(cssText); 24 styleBtnRole.appendChild(textNode); 25 } 26 head.appendChild(styleBtnRole); 27 } 28 }
注意此处scale(0)为不可见,scale(1)为可见。
head中最终渲染的style如下:
![](https://img2020.cnblogs.com/blog/1801750/202010/1801750-20201011102354892-1360428599.png)
同时每个需要判断权限的按钮上增加authComponent class,而authComponent的样式为:
1 .authComponent{ 2 transform: scale(0); 3 }
实现逻辑是所有按钮默认不展示,当获取到对应的权限后,增加对应的权限样式时才会显示,如下图:
需要注意的时,显示按钮class的获取,在配置权限时可以增加该class,便于查找。
平时学到的一些技术和技巧都没有记录下来,以后就多多记录,共同学习进步啦啦啦啦啦啦。。。。欢迎指点😂