admin/packages/effects/access/src/directive.ts

/**
 * Global authority directive
 * Used for fine-grained control of component permissions
 * @Example v-access:role="[ROLE_NAME]" or v-access:role="ROLE_NAME"
 * @Example v-access:code="[ROLE_CODE]" or v-access:code="ROLE_CODE"
 */
import type { App, Directive, DirectiveBinding } from 'vue';

import { useAccess } from './use-access';

function isAccessible(
  el: HTMLElement,
  binding: DirectiveBinding<string | string[]>,
) {
  const { /* accessMode,*/ hasAccessByCodes, hasAccessByRoles } = useAccess();

  const value = binding.value;

  if (!value) return;
  const authMethod =
    /* accessMode.value === 'frontend' &&*/ binding.arg === 'role'
      ? hasAccessByRoles
      : hasAccessByCodes;

  const values = Array.isArray(value) ? value : [value];

  if (el && !authMethod(values)) {
    if (binding.modifiers.disabled) {
      el.classList.add('disabled');
      el.setAttribute('disabled', 'disabled');
      el.dataset.disabled = binding.arg;
    } else el?.remove();
  }
}

const mounted = (el: Element, binding: DirectiveBinding<string | string[]>) => {
  isAccessible(el, binding);
};

const authDirective: Directive = {
  mounted,
};

export function registerAccessDirective(app: App) {
  app.directive('access', authDirective);
}