Vue3使用自定义指令解决按钮权限

前言：涉及到按钮权限一般是各类管理系统，所以需要对账号进行权限细分。此处使用Vue3的自定义指令时，默认我们已经登录了账号，并在“本地 || pinia || vuex”中存储了账号的权限。

先来说说Vue3的自定义指令用法，全局注册自定义的语法：

// main.js
const app = createApp(App)
app.directive("指令名",(el, binding)=>{})
app.directive("指令名",{ 各种生命周期钩子 })

创建自定义指令时，可以传递两个参数，第一个是自定义的指令名字，例如"premission",“color”。

使用的时候就是v-color，v-premission。

第二个参数官方叫法“指令定义对象”，可以传个函数，也可以传个对象。

那么第二个参数什么时候使用函数，什么时候使用对象？

官方解释：对于自定义指令来说，常见的情况是仅仅需要在 mounted 和 updated 上实现某些操作，除此之外并不需要其他钩子。这种情况下我们可以直接用一个函数来定义指令。

所以当你需要操作除了 mounted 和 updated 以外的其他生命周期时，第二个参数就传对象。

一个指令的定义对象可以提供N多种钩子函数，如下：

// 在绑定元素的 attribute 前或事件监听器应用前调用

created(el, binding, vnode, prevVnode) {},

// 在元素被插入到 DOM 前调用

beforeMount(el, binding, vnode, prevVnode) {},

// 在绑定元素的父组件及他自己的所有子节点都挂载完成后调用

mounted(el, binding, vnode, prevVnode) {},

// 绑定元素的父组件更新前调用

beforeUpdate(el, binding, vnode, prevVnode) {},

// 在绑定元素的父组件及他自己的所有子节点都更新后调用

updated(el, binding, vnode, prevVnode) {},

// 绑定元素的父组件卸载前调用

beforeUnmount(el, binding, vnode, prevVnode) {},

// 绑定元素的父组件卸载后调用

unmounted(el, binding, vnode, prevVnode) {}

知道了自定义指令的使用方法，就可以通过自定义指令对我们的按钮进行权限判断了。

考虑到实际项目中自定义指令极有可能不止一个，如果都写在main.js里会很不优雅，所以我们直接封装一个专门注册自定义指令的函数，将Vue实例app作为参数传进去，就可以在函数里疯狂地注册自己想要的自定义指令了。

// 文件夹directive下的index.js

import permission from './permission'
import colorfrom './color'

export default function (app) {
  app.directive('permission', permission)  // 传入定义对象
  app.directive('color', color)
}

自定义指令中的定义对象的逻辑抽取出来单独封装，如上述代码中的permission。

// 文件permission.js


// 判断按钮权限逻辑
const checkPermission = (el, binding) => {

    // 获取自定义指令传过来的数组（binding.value）
    const btnRoles = binding.value
    // 取一下本地存的账号权限
    const userRoles = JSON.parse(localStorage.getItem("role"))

    // 判断自定义指令的传值，在账号权限数组中能否找到 
    if (btnRoles && btnRoles instanceof Array) {
        if (btnRoles.length) {
            // 能找到返回true
            const hasPermission = userRoles.some(v => {
                return btnRoles.includes(v)
            })
            // 找不到返回false，使用自定义指令的钩子函数，操作dom元素删除该节点
            if (!hasPermission) {
                el.parentNode && el.parentNode.removeChild(el)
            }
        }
        else {
            throw new Error(`传入关于权限的数组，如 v-permission="['super','normal']"`)
        }
    }
}

// 导出一个对象用作自定义指令的第二个参数
export default {
  mounted(el, binding) {
    checkPermission(el, binding)
  },
  updated(el, binding) {
    checkPermission(el, binding)
  }
}

在组件中使用我们的自定义指令

<el-button v-permission="['super']">超级管理员</el-button>

Vue3使用自定义指令解决按钮权限

猜你喜欢