創(chuàng)建hasPermission.js

export default (Vue) => {
  /**自定義按鈕權(quán)限指令 */
  Vue.directive('has', {
    mounted(el, binding) {
      console.log(el, binding)
      //獲取按鈕權(quán)限
      if (!Vue.config.globalProperties.$_has(binding.value)) {
        //移除不匹配的按鈕
        el.parentNode.removeChild(el)
      }
    },
  })

  //檢查權(quán)限方法
  Vue.config.globalProperties.$_has = function (value) {
    let isExist = false

    var btnPermsArr = ['user:add', 'user:edit', 'user:del'] //獲取從服務(wù)器請(qǐng)求存儲(chǔ)本地的按鈕權(quán)限
    if (btnPermsArr.includes(value)) {
      isExist = true
    }
    return isExist
  }
}

引入到main.js中

import hasPermission from 'utils/hasPermission' //vite.config.js配置utils別名
const app = createApp(App)
app.use(router).use(store).use(antd).use(hasPermission)
app.mount('#app')

使用

<a-button type="primary" v-has="'user:add'">添加</a-button>