vue3 按钮鉴权

前端常常会面临【按钮鉴权】的需求，不同角色的用户，拥有不同的权限，用户所能操作的按钮也不同。在页面中怎样判断用户有哪些按钮是可用的，有哪些按钮是不可用的。

通常后台管理系统中会对用户做人员，角色，权限管理，对用户角色进行设置管理，再此不做详诉。

1. 先要获取权限数据，通过接口获取到

   // 数组示例
   const data = ref<string[]>([
    'userId:pageName:create',
    'userId:pageName:edit',
   ])
   

2. 将权限数组List缓存

   sessionStorage.setItem('AuthorBtn', data.value)
   

3. 新增鉴权指令vHasShow

   import type { Directive } from 'vue'
    // 自定义指令的名字必须以v开头，使他们可以直接在模板中使用
   const vHasShow: Directive = (el, binding) => {
     if (!data.value.includes('userId(你当前的用户userId):' + binding.value)) {
         el.style.display = 'none'
     }
   }
   

4. 在页面中对指令进行运用

   <div>
    <!-- 操作按钮上 加指令用来鉴权 -->
    <button v-has-show="'pageName:create'">创建</button>
    <button v-has-show="'pageName:edit'">编辑</button>
    <button v-has-show="'pageName:delete'">删除</button>
   </div>