對於許可權來說都不陌生，而選單許可權及路由許可權都很好控制，但按鈕許可權就沒那麼容易了，本文主要說明每個頁面的按鈕根據其擁有的許可權來控制：

1）定義按鈕許可權的指令

import Vue from 'vue'


Vue.directive('has', {
  inserted: function (el, binding, vnode) {
      let isExist = false
      // 從配置獲取使用者按鈕許可權
      let btnPermissions = vnode.context.$route.meta.btnPermissions
      if (btnPermissions && btnPermissions.indexOf(binding.value) > -1
 
) {
          isExist = true
      }
      //不存在時刪除節點
      if (el.parentNode && !isExist) {
          el.parentNode.removeChild(el)
      }
  }
})

此指令是根據路由中配置的許可權是否顯示節點。

需要注意的是，上述的指令配置是針對Vue2.0的，對於Vue3.0會報錯，需要使用下面的方式（這是一個大坑）：

import App from './App.vue'
const app = createApp(App);

app.directive(
 
'button', {
   mounted(el, binding) {
       let isExist = false
       // 從配置獲取使用者按鈕許可權
       let btnPermissions = router.currentRoute.value.meta.btnPermissions
       if (btnPermissions && btnPermissions.indexOf(binding.value) > -1) {
           isExist = true
      }
      //不存在時刪除節點
      if
 
 (el.parentNode && !isExist) {
           el.parentNode.removeChild(el)
       }
   }
})

2）定義兩個頁面，分別是home.vue和test.vue，其內容是一樣的

<template>
  <div>
    <el-button v-has="'query'">查詢</el-button>
    <el-button v-has="'add'">新增</el-button>
    <el-button v-has="'delete'">刪除</el-button>
  </div>
</template>

需要注意的是，指令中的字串一定要包含單引號，否則會報錯。

3）在router/index.js中配置路由：

const routes = [
  {
    path: '/home',
    name: 'home',
    component: () => import('@/views/home'),
    meta: {
      btnPermissions: ['query', 'add', 'delete']
    }
  },
  {
    path: '/test',
    name: 'test',
    component: () => import('@/views/test'),
    meta: {
      btnPermissions: ['query', 'add']
    }
  },

]

在每個路由中配置了meta屬性，裡面包含了每個頁面用於的許可權。

分別訪問/home 和 /test，發現home顯示了所有的按鈕，而test只顯示了兩個按鈕。此時已經做到了按鈕級別的許可權。模擬了兩個不同的角色可檢視的按鈕資訊。

在正式開發過程中，每個頁面的按鈕即可通過指令的方式，在後臺管理中維護選單及按鈕資訊，再將這些許可權分配給不同的角色，那麼在使用者登入後動態渲染路由和選單，就能達到效果。