Vue3自定义指令实现前端权限控制 - 按钮权限

文章目录

• 一、什么是按钮权限控制
• 二、思路 (往往是后端返回的权限标识)
• • 三、实现
• main.ts注册为全局指令
• 总结

---

一、什么是按钮权限控制

概念：根据当前用户的权限数据控制按钮的显示和隐藏

二、思路 (往往是后端返回的权限标识)

后端返回的权限数据模拟

// 模拟权限mock数据
const permissions = [
    "park:bulidng:add",
    "park:bulidng:del",
    "park:bulidng:edit",
]

思路：每一个需要做权限控制的按钮都有一个自己独有的 标识 , 如果标识可以在权限数据列表中找到，则显示，找不到就隐藏

三、实现

按钮绑定上v-my-point自定义全局指令

代码如下（示例）：

  <div class="container">
    <el-button v-my-point="'bulidng:add'" type="success">添加</el-button>
    <el-button v-my-point="'bulidng:del'" type="primary">编辑</el-button>
    <el-button v-my-point="'bulidng:edit'" type="danger">删除</el-button>
  </div>

main.ts注册为全局指令

// 自定义按钮权限directive
const myPointDirective:Directive<HTMLElement,string> = (el,binding) => {
    if (!permissions.includes(user + ":" + binding.value)) {
        el.style.display = 'none'
    }

}
//  全局注册指令
app.directive('my-point', myPointDirective);

效果：

后端返回的权限数据没有，则上面按钮就不会显示

总结

这样就实现了通过全局自定义指令来实现按钮权限的控制了。