首次提交

cdtestplant/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)
+    },
+}

cdtestplant/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(`没有权限! 该权限为 v-permission="['admin','user']"`)
+    }
+}
+
+export default {
+    mounted(el: HTMLElement, binding: DirectiveBinding) {
+        checkPermission(el, binding)
+    },
+    updated(el: HTMLElement, binding: DirectiveBinding) {
+        checkPermission(el, binding)
+    },
+}