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只显示了两个按钮。此时已经做到了按钮级别的权限。模拟了两个不同的角色可查看的按钮信息。

在正式开发过程中，每个页面的按钮即可通过指令的方式，在后台管理中维护菜单及按钮信息，再将这些权限分配给不同的角色，那么在用户登录后动态渲染路由和菜单，就能达到效果。