前端关于web管理端按钮权限的判断，终于会了！！！

　　管理端项目牵涉到多种角色的登录，进而需要很多判断权限的问题，例如菜单权限、按钮权限等。这个问题在我第一份工作的时候并没有实现，所以心有遗憾，后来第二份工作中关于按钮和菜单的权限是每处去比对判断的，总觉得不是最合适的方法，作为有经验的前端(吹嘘一番而已，此处省略3个字.....😂)，应该考虑到的是用最少的代码实现最广泛的功能，而不是在改动的时候需要每一处都修改，没有任何“框架”的思想，，所以废话不多说了，开始吧。
 
　　菜单权限和按钮权限都是需要这些步骤：
  1. 拿到能看到的菜单或者按钮的列表
  2. 当前按钮和菜单的权限
  3. 判断当前权限是否在能够看到的权限列表里面
　　在用户请求login接口时，返回的信息中有buttonRoleList信息，这里是按钮权限的信息，里面是所有当前用户的按钮权限，数据类型如

 

 登录时获取到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 }
　　实现逻辑是在页面head中增加id为styleBtnRole的style样式，样式中是遍历增加class为buttonRoleList中每一项的样式 {transform: scale(1);-webkit-transform: scale(1);}
注意此处scale(0)为不可见，scale(1)为可见。
　　head中最终渲染的style如下：

 

　　同时每个需要判断权限的按钮上增加authComponent class,而authComponent的样式为：

1 .authComponent{
2 　　transform: scale(0);
3 }

　　实现逻辑是所有按钮默认不展示，当获取到对应的权限后，增加对应的权限样式时才会显示，如下图：

 

 　　需要注意的时，显示按钮class的获取，在配置权限时可以增加该class，便于查找。

　　平时学到的一些技术和技巧都没有记录下来，以后就多多记录，共同学习进步啦啦啦啦啦啦。。。。欢迎指点😂

 

 

posted @ 2020-10-11 10:32  time_knows  阅读(1613)  评论(0)  编辑  收藏  举报