vue2按钮权限控制
时间: 2023-07-18 15:03:43 浏览: 75
在 Vue2 中实现按钮权限控制可以采用以下的步骤:
1. 在后端获取当前用户所拥有的权限列表。
2. 在前端定义一个自定义指令,用来控制按钮的显示与隐藏。
3. 在按钮组件中使用自定义指令,根据用户权限列表判断是否需要显示该按钮。
以下是一个简单的示例代码:
1. 后端返回的权限列表格式
```json
{
"buttons": ["add", "edit", "delete"]
}
```
2. 自定义指令的实现
```javascript
Vue.directive('has-button', {
bind: function(el, binding, vnode) {
const buttons = vnode.context.$store.state.buttons // 从 Vuex 中获取当前用户权限列表
const value = binding.value // 获取自定义指令绑定的值
if (!buttons.includes(value)) { // 如果当前用户没有该按钮的权限,则隐藏该按钮
el.style.display = 'none'
}
}
})
```
3. 按钮组件的使用
```html
<template>
<button v-has-button="'add'">添加</button>
<button v-has-button="'edit'">编辑</button>
<button v-has-button="'delete'">删除</button>
</template>
```
在上述代码中,`v-has-button` 是自定义指令的名称,`"'add'"`、`"'edit'"`、`"'delete'"` 则是按钮对应的权限名称。当用户拥有该按钮的权限时,该按钮将正常显示;否则,该按钮将被隐藏。