Vue如何做按鈕級別的權限？

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

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只顯示了兩個按鈕。此時已經做到了按鈕級別的權限。模擬了兩個不同的角色可查看的按鈕信息。

在正式開發過程中，每個頁面的按鈕即可通過指令的方式，在后台管理中維護菜單及按鈕信息，再將這些權限分配給不同的角色，那么在用戶登錄后動態渲染路由和菜單，就能達到效果。