feat: init

src/directive/index.ts

@@ -0,0 +1,8 @@
+import { App } from 'vue'
+import permission from './permission'
+
+export default {
+  install(Vue: App) {
+    Vue.directive('permission', permission)
+  },
+}

src/directive/permission/index.ts

@@ -0,0 +1,30 @@
+import { DirectiveBinding } from 'vue'
+import { useUserStore } from '@/store'
+
+function checkPermission(el: HTMLElement, binding: DirectiveBinding) {
+  const { value } = binding
+  const userStore = useUserStore()
+  const { role } = userStore
+
+  if (Array.isArray(value)) {
+    if (value.length > 0) {
+      const permissionValues = value
+
+      const hasPermission = permissionValues.includes(role)
+      if (!hasPermission && el.parentNode) {
+        el.parentNode.removeChild(el)
+      }
+    }
+  } else {
+    throw new Error(`need roles! Like v-permission="['admin','user']"`)
+  }
+}
+
+export default {
+  mounted(el: HTMLElement, binding: DirectiveBinding) {
+    checkPermission(el, binding)
+  },
+  updated(el: HTMLElement, binding: DirectiveBinding) {
+    checkPermission(el, binding)
+  },
+}