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

　　管理端项目牵涉到多种角色的登录，进而需要很多判断权限的问题，例如菜单权限、按钮权限等。这个问题在我第一份工作的时候并没有实现，所以心有遗憾，后来第二份工作中关于按钮和菜单的权限是每处去比对判断的，总觉得不是最合适的方法，作为有经验的前端(吹嘘一番而已，此处省略3个字.....😂)，应该考虑到的是用最少的代码实现最广泛的功能，而不是在改动的时候需要每一处都修改，没有任何“框架”的思想，，所以废话不多说了，开始吧。

 

　　菜单权限和按钮权限都是需要这些步骤：

1. 拿到能看到的菜单或者按钮的列表
2. 当前按钮和菜单的权限
3. 判断当前权限是否在能够看到的权限列表里面

　　在用户请求login接口时，返回的信息中有buttonRoleList信息，这里是按钮权限的信息，里面是所有当前用户的按钮权限，数据类型如

 

 登录时获取到buttonRoleList后须要将数据存储在vuex中，且调用createStyle操作，createStyle的方法实现如下：

export function createStyle (styleList, styleid = 'styleBtnRole') {
  // 先更新按钮角色列表
  buttonRoleList = styleList;
  // 在页面head中增加id为styleBtnRole的style样式
  var head = document.getElementsByTagName('head')[0];
  var styleBtnRole = document.getElementById(styleid);
  if (styleBtnRole) {
    head.removeChild(styleBtnRole);
  }
  if (styleList.length) {
    styleBtnRole = document.createElement('style');
    styleBtnRole.id = styleid;
    styleBtnRole.type = 'text/css';
    // 样式中是遍历增加class为buttonRoleList中每一项的样式
    var cssText = '';
    styleList.forEach(style => {
      cssText += '.' + style + '{transform: scale(1);-webkit-transform: scale(1);}';
    });
    if (styleBtnRole.styleSheet) { // IE
      styleBtnRole.styleSheet.cssText = cssText;
    } else { // w3c
      // w3c浏览器中只要创建文本节点插入到style元素中就行了
      var textNode = document.createTextNode(cssText);
      styleBtnRole.appendChild(textNode);
    }
    head.appendChild(styleBtnRole);
  }
}

　　实现逻辑是在页面head中增加id为styleBtnRole的style样式，样式中是遍历增加class为buttonRoleList中每一项的样式 {transform: scale(1);-webkit-transform: scale(1);}

注意此处scale(0)为不可见，scale(1)为可见。

　　head中最终渲染的style如下：

 

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

.authComponent{
　　transform: scale(0);
}

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

 

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

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