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 pagePath
          router.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
}

//     删除


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69

二、引入组件和使用

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

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

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

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