Vue多頁面 按鈕級別許可權控制 directive指令控制

利用driective 構建自己的指令，實現按鈕級別許可權

專案結構如下：

修改router.js

    {
        path: 'schools',
        name: '列表',
        component: () => import('./eduAdministration/SchoolList'),
        meta: {
          permissions: ['schools'],
          btnpermissions:['admin','test'],
          title: 
 
'列表',
          icon: '',
          scrollToTop: true
        }
      },

新建檔案 btnPermission.js檔案

內容如下

import Vue from 'vue'
import store from '../index'
/**許可權指令**/
const has = Vue.directive('has', {
  bind: function (el, binding, vnode) {
    // 獲取按鈕許可權
    let Permissions = vnode.context.$route.meta.btnpermissions;
    console.log(
 
'permission',Permissions)
    if (!Vue.prototype.$_has(Permissions)) {
      let className=el.getAttribute("class")
      className=className.concat(" hidden")
      el.setAttribute("class",className)
    }
  }
});
// 許可權檢查方法
Vue.prototype.$_has = function (value) {
  let isExist 
 
= false;
   debugger
  let PermissionsStr =store.getters.roles;
  if (PermissionsStr == undefined || PermissionsStr == null) {
    return false;
  }

  PermissionsStr.forEach((per)=>{
    if (value.indexOf(per) > -1) {
      isExist = true;
    }
  })
  return isExist;
};
export {has}

將檔案引入index.js

import Vue from 'vue'
import Vuex from 'vuex'
import app from './modules/app'
import user from './modules/user'
import getters from './getters'
import permission from './modules/permission'
import has from './modules/btnPermission'
Vue.use(Vuex)
const store = new Vuex.Store({
  modules: {
    app,
    user,
    permission
  },
  getters
})

export default store

頁面新增許可權

     el-button(size='mini' @click="handleEdit(scope.row)" v-has) 編輯

最後一步

在 css中新增hidden樣式

<style scoped>
  .hidden {
    display:none;
  }
</style>

大功告成