通过自定义指令 指定组件的元素、按钮等权限

前提：在路由对象里里要提现出组件里元素的权限又哪些，一般情况下，后端在返回路由权限的时候会给我们返回一组由权限标识的数组。（标识应该是唯一的），路由权限的具体实现请看根据权限路由配置侧边栏菜单（vue3+ts）

一、路由对象携带元素权限标识 

我这里标识字段为authCode ，一般情况下，会把标识字段authCode放到路由对象的meta里面。

路由对象示例如下：

 {
    name: 'approve',
    path: '/approve',
    meta:{
      title:'菜单',
      authCode:['create','edit','delete']
    },
    component: () => import('@/views/approve/index.vue')
  }

二、定义 自定义指令 

 接着我们创建一个directive文件夹，在文件夹里创建一个v-auth.ts文件（自定义指令一般都是v-的格式），文件代码如下：

import { app } from '@/utils'

/** 权限指令 */
export const auth = {
  mounted(el: any, binding: any, vnode: any, prevVnode: any){
    /** 获取路由对象 */
    const route = app.route
    const authCode = binding.value || binding.arg

    if(route.meta.authCode && authCode) {
      const code = route.meta.authCode
      if(Array.isArray(code)) {
        if(code.indexOf(authCode) == -1) el.remove()
      } else if(code != authCode) {
        el.remove()
      }
    }
    
  }
}

三、使用自定义指令 

如何在组件里使用自定义指令

如果是单个权限，直接v-auth:edit即可，如果拥有权限就会在组件中显示，如果没有权限就不会显示。代码如下： 

​
 <div class="bg-white p-4 mb-4" v-auth:create>
    <a-button @click="edit()" type="primary" class="!h-10" style="width:102px">新建菜单                     
    </a-button>
 </div>

​

如果拥有多个权限，可使用v-auth:['create','edit']数组的格式书写，同样可以生效，代码如下：

<div class="bg-white p-4 mb-4" v-auth:['create','edit']>
  <a-button @click="edit()" type="primary" class="!h-10" style="width:102px">新建菜单
  </a-button>
</div>