持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第12天，点击查看活动详情

实现按钮权限

引言

通过之前一段时间 Express 和 Mysql 的学习

这里尝试来搭建一个 后台系统 来巩固下学习的技术。

实现按钮权限

上一节，我们学习了什么是 自定义指令，并且如何进行使用

这一节，进行 按钮权限 的实现

实现

首先在项目中进行注册我们的 自定义指令，这里选择 全局注册，毕竟用到的地方很多

在 main.ts 中进行注册

import { permission } from '@/directives/permission'

app.directive('permission', permission)

这里先想好，自定义指令，如何使用以及如何判断显示与否

再进行一下补充，v-permission 也可以传递一个对象，然后我们会在 binding.value 中获取到这个值，根据这个值，与这个用户所拥有的按钮权限做查找，如果存在，则显示，不存在则隐藏。

<button v-permission="{action:'sys:menu:add'}">新增</button>

那么在 src/directives/permission.ts 中进行权限代码的编写

import { ObjectDirective } from 'vue'
import { hasPermission } from '@/utils/common'

const permission: ObjectDirective = {
  mounted(el, binding) {
    const { action } = binding.value

    if (!hasPermission(action)) {
      el.remove()
    }
  },
}

通过上面的代码就可以轻松的搞定了我们的按钮权限问题

但是这里呢，提出一个疑问，因为我们这里是直接将这个按钮元素给 remove 删除了，可能会影响页面的布局

此时我又想将其 disabled 禁用掉。

这里给出一个简单的方案，但是不怎么不是很安全

首先是再给一个属性为 effect 效果的意思，值为 disabled，书写方式如下
```
v-permission="{ action: 'sys:menu:add', effect: 'disabled' }"
```

一旦 action 没有找到，那么就判断effect 是否是 disabled

如果不是，则直接进行 remove 删除掉
如果是，则将样式进行处理

if (!hasPermission(action)) {
  if (effect === 'disabled') {
    el.style.pointerEvents = 'none'
    el.style.background = '#ccc'
  } else {
    el.remove()
  }
}

总结

通过 Express-Mysql-Vue3-TS-Pinia 做出一个 后台系统 项目

这一节，通过 自定义指令 实现 按钮权限 的功能

后台项目 Express-Mysql-Vue3-TS-Pinia 实现按钮权限

实现按钮权限

引言

实现按钮权限

实现

总结