前端關於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，便於查找。

　　平時學到的一些技術和技巧都沒有記錄下來，以后就多多記錄，共同學習進步啦啦啦啦啦啦。。。。歡迎指點😂