vue3按钮级别权限控制

官网介绍

实现流程

1.mian.ts中注册自定义指令

import { createApp } from 'vue';
import App from './App.vue';
const app: any = createApp(App);
// 注册 (函数指令)
app.directive('permission', (el, binding, vnode) => {
	//binding.value=>使用v-permission绑定的值
	//与后端返回的数组进行比对，如果后端返回的数组中的值包含binding.value
	//则有权限，该按钮展示，否则隐藏
   if (sessionStorage.getItem('userInfo')!.indexOf(binding.value) > -1) 						   {
      // alert('有权限');
    } else {
      el.parentNode && el.parentNode.removeChild(el);
      // alert('无权限，删除改节点');
    }
    // 这将被作为 `mounted` 和 `updated` 调用
  })
  .use(router)
  .mount('#app');

2.在app.vue或者别的文件中拿到后端返回的权限数组，并存到sessionStorage中

此处用sessionStorage模拟后端接口返回数据

    sessionStorage.setItem('userInfo', '[classAdd,classEdit]');

3.在页面中进行使用，比如在class.vue中

<template>
//如果后端饭后的值中不含classReset,则该按钮不会显示
<button v-permission="['classReset']">重置</button>
<button v-permission="['classAdd']">添加</button>
</template>

<script setup lang="ts">
onMounted(() => {

});
</script>
<style lang="less" scoped></style>