vue自定义操作权限控制级别的指令

directives.js：

export default {
 // 操作权限控制
  hasPermission: {
    inserted: function (el, binding, vnode) {
      const types = vnode.context.$route.meta.types//获取router中各个路由上定义的types属性
      const values = binding.value
      let flag = true
      for (const v of values) {
        if (!types.includes(v)) {
          flag = false
        }
      }
      if (!flag) {
        el.parentNode.removeChild(el)
      }
    }
  }
}

router/index.js：

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const router = new VueRouter({
  routes: [
    {
      path: '/detail/:tid',
      name: 'detail',
      props: true,
      component: Detail,
      meta: {
        // 通过后台接口动态添加到路由 addRoutes
        types: ['get', 'add', 'edit', 'delete']
      }
    },
  ]
})
export default router

单页面使用

<template>
  <span v-hasPermission="['get', 'delete']">删除</span>
</template>
<script>
</script>