Vue2通过自定义指令实现按钮权限控制

小半 • 2024年2月29日下午3:24 • 前端开发 • 阅读 289

目前较为常见的后台管理系统开发过程中，需要将系统菜单、功能权限粒子化，一般需要将权限分为：路由权限和功能权限，一般的菜单权限我们可以通过后端控制返回特定路由信息动态加载菜单路由，而功能权限我们可以通过控制功能触发动作即按钮操作来控制权限，本文介绍通过自定义一个v-permission指令实现按钮权限的控制。

创建permission.js

如下，为创建的permisssion.js用于实现对于按钮的验证，源码如下：

// directive/permission.js 文件
import store from '@/store'

// 新增 v-permission指令，
function checkPermission(el, binding) {
  const { value } = binding
  const permissionList = store.getters && store.getters.permissionList
  if (value && value instanceof Array) {
    if (value.length > 0) {
      const incomePermissions = value;
      const hasPermission = incomePermissions.some(income => {
        const resList = permissionList.filter(item => {
          // action:'wxh:xdkkddk‘ title:'名称’
          return String(item.action) === String(income)
        })
        return resList.length;
      })
      if (!hasPermission) {
        el.parentNode && el.parentNode.removeChild(el);
      }
    }
  } else {
    throw new Error(`need permissions! Like v-permission="['admin','editor']"`)
  }
}

export default {
  inserted(el, binding) {
    checkPermission(el, binding)
  },
  update(el, binding) {
    checkPermission(el, binding)
  },
  install = function (Vue) {
    Vue.directive('permission', permission)
  }
}

挂载directive

通过将directive挂载在vue中实现自定义指令v-permission:

import Vue from 'vue'
import Directives from '@/directive'

const { permission } = Directives
// 添加 v-permission 指令
Vue.use(permission)

使用自定义指令

通过给按钮组件设置v-permission属性，格式为数组，如：['arch-btn','main-btn']，使用代码如下：

<el-button
    v-permission="item.permission || []"
    :type="item.type || 'primary'"
    class="arch-btn"
    size="middle"
    @click="item.onClick"
>
    <svg-icon :icon-class="item.icon || 'ic_xinjian'" />
    { item.label }}
</el-button>