前端 按钮级别 权限校验 directive VS 装饰器

说起前端按钮级别权限校验 很多人就会想起 v-if 自定义指令 等等 这些比较常用的 也确实非常方便

const myDirective = {
  // 在绑定元素的 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) {}
}

其实就是采用自定义指令的生命周期获取值判断是否去删除节点而已

Demo

permission.ts

const preList = ["add", "del"];

export const permission = {
  mounted(el, bindding, vnode) {
    const isPermission = preList.includes(bindding.value);
    if (!isPermission) {
      el.parentNode && el.parentNode.removeChild(el);
    }
  },
};

main.ts

import { permission } from "./permission.ts"
app.directive('permission',permission)

test

<template>
  <div>
    <button v-permission="add">add</button>
    <button v-permission="edit">edit</button>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
const add = ref('add')
const edit = ref('edit')
</script>

至此 一个简单的权限指令demo完成

装饰器 百度AI是这样介绍的

TypeScript装饰器是一种特殊类型的声明，可以附加到类声明、方法、属性或参数上，并可以修改类的行为。 TypeScript装饰器本质上是一个方法，可以注入到类、属性、方法、参数中来拓展它们的功能。常见的装饰器有：类装饰器、属性装饰器、方法装饰器、参数装饰器。

• 类装饰器在类声明之前被声明（紧靠着类声明），应用于类构造函数，用来监视、修改或替换类定义。
• 属性装饰器可以修改类的属性行为，也可以用来添加或修改类的原型方法。
• 方法装饰器用来修改类的方法行为，也可以用来添加或修改类的静态方法。
• 参数装饰器可以修改方法的参数行为，也可以用来添加或修改方法的可变参数数量。

与其说是装饰器还不如说是组件封装 校验放到组件内部实现

Demo 封装一个ElButton.vue

.ts

const permissionList = ['add','edit']

function checkPermission(target: Function, _context?: any) {
    target.prototype.getPermission = (key:string): boolean => {
        return permissionList.includes(key);
    };
}

@checkPermission
export class UserEntity {
    getPermission!:()=>boolean
    constructor() {}
}

<template>
    <button v-bind="$attrs" :disabled="!disabled">
        <slot />
    </button>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import {UserEntity} from "../decorators/permission.ts"
const props = defineProps({
    permission:{
        type:String,
        required:true
    }
})
const userEntity = new UserEntity()
const disabled = ref(true)
disabled.value = userEntity.getPermission(props.permission)
</script>

<style></style>

使用

<template>
  <div>
    <button @click="clickhandler">add</button>
    <button @click="edithandler">edit</button>
    <br />
    <br />
    <hr />
    <br />
    <br />
    <ElButton permission="add" @click="clickhandler">点击</ElButton>
    <ElButton permission="edit">edit</ElButton>
    <ElButton permission="del">del</ElButton>
  </div>
</template>

<script lang="ts" setup>
import ElButton from "./components/EButton.vue"
const clickhandler = ()=>{
  console.log("aaa")
}
const edithandler = ()=>{}
</script>

效果