# 按钮权限
- 方案1
https://juejin.im/post/5cb681a56fb9a0688e0672d5 (opens new window)
src/utils.index.js
import store from '@/store/index'
export function permit (e) {
let permissions = store.state.d2admin.user.info.info.permissions
let perList = []
permissions.forEach(item => { perList.push(item.permission) })
return perList.includes(e)
}
1
2
3
4
5
6
7
2
3
4
5
6
7
src/pages/test.vue
<template>
<el-button type="primary" size="mini" v-if="basePermit('rs:stock:inStock')">权限控制</el-button>
</template>
1
2
3
2
3
import { permit } from '../utils'
export default{
methods:{
basePermit (e) {
return permit(e)
}
}
}
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
- 方案二
https://juejin.im/post/5cb3f9a36fb9a0687015c8ac (opens new window)
src/utils/directive.js
import Vue from 'vue'
import store from '@/store/index'
let permissions = store.state.d2admin.user.info.info.permissions
let perList = []
permissions.forEach(item => { perList.push(item.permission) })
Vue.directive('permit', {
inserted: function (el, binding) {
if (Array.isArray(perList) && perList.length > 0) {
let allow = binding.value.some(item => {
return perList.includes(item)
})
if (!allow) {
if (el.parentNode) {
el.parentNode.removeChild(el)
}
}
}
}
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
src/pages/test.vue
<el-button type="primary" size="mini" v-permit="['rs:stock:inStock']">权限控制</el-button>
1
import '../utils/directive.js'
1