feat: add v-access directive

packages/effects/access/src/directive.ts

@@ -0,0 +1,38 @@
+/**
+ * Global authority directive
+ * Used for fine-grained control of component permissions
+ * @Example v-auth="RoleEnum.TEST"
+ */
+import type { App, Directive, DirectiveBinding } from 'vue';
+
+import { useAccess } from './use-access';
+
+function isAccessible(el: Element, binding: any) {
+  const { accessMode, hasAccessByCodes, hasAccessByRoles } = useAccess();
+
+  const value = binding.value;
+
+  if (!value) {
+    return;
+  }
+  const authMethod =
+    accessMode.value === 'frontend' ? hasAccessByRoles : hasAccessByCodes;
+
+  if (!authMethod(value)) {
+    el?.remove();
+  }
+}
+
+const mounted = (el: Element, binding: DirectiveBinding<string | string[]>) => {
+  isAccessible(el, binding);
+};
+
+const authDirective: Directive = {
+  mounted,
+};
+
+export function installAccessDirective(app: App) {
+  app.directive('access', authDirective);
+}
+
+export default authDirective;