first commit

src/directives/index.ts

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

src/directives/permission/hasPerm.ts

@@ -0,0 +1,35 @@
+import type { DirectiveBinding, Directive } from 'vue'
+import { useUserStore } from '@/stores'
+
+/**
+ * @desc v-hasPerm 操作权限处理
+ * @desc 使用 v-hasPerm="['home:btn:add']"
+ */
+function checkPermission(el: HTMLElement, binding: DirectiveBinding) {
+  const userStore = useUserStore()
+  const { value } = binding
+  const all_permission = '*:*:*'
+
+  if (value && Array.isArray(value) && value.length) {
+    const permissionValues: string[] = value
+    const hasPermission = userStore.permissions.some((perm) => {
+      return all_permission === perm || permissionValues.includes(perm)
+    })
+    if (!hasPermission) {
+      el.parentNode && el.parentNode.removeChild(el)
+    }
+  } else {
+    throw new Error(`need permission! Like v-hasPerm="['home:btn:edit','home:btn:delete']"`)
+  }
+}
+
+const directive: Directive = {
+  mounted(el: HTMLElement, binding: DirectiveBinding) {
+    checkPermission(el, binding)
+  },
+  updated(el: HTMLElement, binding: DirectiveBinding) {
+    checkPermission(el, binding)
+  }
+}
+
+export default directive

src/directives/permission/hasRole.ts

@@ -0,0 +1,34 @@
+import type { DirectiveBinding, Directive } from 'vue'
+import { useUserStore } from '@/stores'
+
+/**
+ * @desc v-hasRole 角色权限处理
+ * @desc 使用 v-hasRole="['admin', 'user]"
+ */
+function checkRole(el: HTMLElement, binding: DirectiveBinding) {
+  const userStore = useUserStore()
+  const { value } = binding
+  const super_admin = 'role_admin'
+  if (value && Array.isArray(value) && value.length) {
+    const roleValues: string[] = value
+    const hasRole = userStore.roles.some((role) => {
+      return super_admin === role || roleValues.includes(role)
+    })
+    if (!hasRole) {
+      el.parentNode && el.parentNode.removeChild(el)
+    }
+  } else {
+    throw new Error(`need role! Like v-hasRole="['admin','user']"`)
+  }
+}
+
+const directive: Directive = {
+  mounted(el: HTMLElement, binding: DirectiveBinding) {
+    checkRole(el, binding)
+  },
+  updated(el: HTMLElement, binding: DirectiveBinding) {
+    checkRole(el, binding)
+  }
+}
+
+export default directive