vue3之权限控制按钮

最近做的一个后台管理系统，要求权限控制到按钮级别，也就会使说不同的用户，可操作的按钮是不同的，有些按钮对某些客户是不可见的，用户A能看到"新增"按钮,而用户B看不到,假设"新增"按钮"的权限是"v-bens:0"

一、获取后台返回的数据，在用户登录成功后,获取用户的按钮权限(数组格式),存储到store中

 二、在使用的页面引用store，否则在自定义指令中获取不到vuex(状态管理工具)里面的数据

 三、给按钮设置权限标识符

 四、根据后台返回的数据存储到状态管理工具中的数据，在自定义指令中进行判断

  directives: {
    btns: {
      mounted(el, bindings) {
        if (store.state.user.status === bindings.value) {
          el.remove();
        }
      },
    },
  },

五、自定义指令参加详解

1. el是获取到的dom元素
2. bindings是获取里面的属性，列如：value值
3. vnode是虚拟节点