Vue自定义指令 - 权限

技术栈：Vue2 + JavaScript

简介

vue有自定义指令的功能，开发者可根据实际业务需求自定义各种功能的指令，其中常出现就的就有鉴权指令。

实现

权限校验

import store from '@/store' // 权限字段存储在store中

export default {
  inserted(el, binding) {
    const { value } = binding
    const all_permission = "*:*:*";
    const permissions = store.getters && store.getters.permissions // 权限
    if (value && (value instanceof Array) && (value.length > 0)) {
      const permissionFlag = value

      const hasPermissions = permissions.some(permission => {
        return all_permission === permission || permissionFlag.includes(permission)
      })

      // 没有权限，删除此dom节点
      if (!hasPermissions) {
        el.parentNode && el.parentNode.removeChild(el)
      }
    } else {
      console.log('请设置操作权限标签值');
      // throw new Error(`请设置操作权限标签值`)
    }
  }
}

指令导出

import hasPermi from './hasPermi'

const install = function(Vue) {
  Vue.directive('hasPermi', hasPermi)
}

if (window.Vue) {
  window['hasPermi'] = hasPermi
  Vue.use(install);
}

export default install

依赖挂载

import permission from './directive/permission'

Vue.use(permission)

应用

登录时获取用户信息，包含权限列表，存储到store中。每次使用自定义权限指令时，代码都会跟store中的权限列表内权限做比对，有权限则显示该元素，否则删除其节点（其子节点也会被删除）。

<div class="tableStyle">
   <el-button type="primary" icon="el-icon-plus" size="mini" @click="handleOrderBatch"
     v-hasPermi="['meter:order:add']">{{ $t("alarm.button3") }}</el-button>
   <el-button class="item" size="mini" icon="el-icon-download" @click="handleExport()"
     v-hasPermi="['meter:alarm:export']">{{ $t("common.export") }}</el-button>
</div>