Vue自定义指令实现按钮级的权限控制

通过v-指令，控制页面上的权限按钮的显示隐藏。首先是我的权限按钮数据，通过登录接口后端返回，前端将数据存在vuex里，在调用指令时候获取到当前页面对应的按钮权限数组，通过v-指令传递标识判断是否在当前页按钮权限数组里，有则显示，无则隐藏。

借鉴博客

一、封装组件

在 src 目录下新建 directive 目录，在目录下新建 permission.js 文件：

以下代码可直接复制：注意使用了store

// import Vue from 'vue'
import store from '@/store'
import router from '@/router'// 检测是否有权限
// 使用Vue.directive声明自定义指令btn-key
export default {install(Vue) {Vue.directive('permission', {/*** inserted：被绑定元素插入父节点时调用* el：指令所绑定的元素，可以用来直接操作 DOM* binding.value：指令的绑定值，例如：v-directive="10" 中，绑定值为 10。*/inserted(el, binding) {// 使用Vue.nextTick()确保在DOM更新后执行操作--解决不更新DOM问题Vue.nextTick(function() {let lastColumns = [] // 获取该角色当前页的按钮列表// 在Vue Router加载完成后执行获取路由参数的操作let pagePathrouter.onReady(() => {pagePath = router.currentRoute.path // 当前路由// console.log('pagePath', pagePath)// console.log('store', store.getters['system/systemConfig']) // 获取vuex里面的后端登录返回的页面权限按钮数组arrList// 从vuex里获取所有页面权限按钮关系数据arrList const arrList = [{ path: '/defectManagement/defectRecord', btnList: ['add'] },{ path: '/defectManagement/defectMaintenance', btnList: ['add', 'edit', 'delete'] },{ path: '/normalPenetratTest/penetratResult/asset', btnList: ['add', 'detail', 'edit', 'delete', 'upload', 'highlight'] },{ path: '/normalPenetratTest/penetratResult/loophole', btnList: ['detail', 'edit', 'delete'] }]arrList.forEach(ele => {if (ele.path === pagePath) {lastColumns = ele.btnList || [] // 获取当前路由下的角色的按钮}})// console.log('获取当前路由下的角色的权限按钮数组', lastColumns)// 执行指令的操作const buttonKey = binding.value// 代表某个元素需要通过权限验证if (buttonKey) {const key = checkKey(lastColumns, buttonKey)console.log('指令触发了', lastColumns, checkKey(lastColumns, buttonKey))if (!key) { // 没有权限el.remove() // 删除按钮}} else {throw new Error('缺少唯一指令')}})})}})}
}// 检测传入的元素key是否可以显示
function checkKey(lastColumns, key) {// 如果传入的元素key不在权限数组里，则不可显示return lastColumns.indexOf(key) > -1
}//     <a-button v-permission="'delete'" type="primary">删除</a-button>

二、引入组件和使用

1.在入口文件 src\main.js 里面引入自定义指令：

import permission './directive/permission'
Vue.use(permission)

2.在使用的页面，按钮中只需引用v-operate指令，赋值判断即可：

<el-button @click='delHandle' type="primary" v-permission="'delete'">删除</el-button>