vue基於頁面中按鈕權限控制

main.js

// 權限
/** 權限指令,對按鈕權限的控制 **/
Vue.directive('allow', {
  bind: function(el, binding) {
    // 通過當前按鈕，獲取所在權限組的組名
    let permissGropName = binding.value.split("_")[0]; 
    // 通過登錄成功后獲取所有權限列表，如下permissGroup類型，存到vuex，其中所有名字必須均獨一無二
    let permissGroup = {
      "proj":["proj_edit","proj_del"],
      "menu":["menu_look","menu_edit"], // 等
    }
    // 按組名獲取權限列表，
    if( permissGroup[permissGropName].indexOf(binding.value) == -1){
      el.style.display = "none"
    }
  }
})

// 以下可根據實際情況使用

// 權限檢查方法（且把該方法添加到vue原型中） 
// Vue.prototype.$_has = function(value) {
//   let isExist = false
//   // 從瀏覽器緩存中獲取權限數組（該數組在登入成功后拉取用戶的權限信息時保存在瀏覽器的緩存中）
//   var buttonpermsStr = sessionStorage.getItem('powerHandle')
//   if (buttonpermsStr === undefined || buttonpermsStr == null) {
//     return false
//   }
//   if (buttonpermsStr.indexOf(value) >= 0) {
//     // 若在按鈕中定義的權限字段能在后端返回的權限數組中能找到，則該按鈕可顯示
//     isExist = true
//   }
//   return isExist
// }

 

具體頁面

<!-- 具體頁面中的按鈕 -->
        <div>
            <button v-allow="'proj_edit'">項目編輯</button> 
            <!-- 改為proj_del，即可查看權限操作demo -->
            <button v-allow="'proj_del1'">項目刪除</button>
        </div>