Vue Permission Directive

vue_permission_directive.js

const Example = {
  data() {
    return {
      users: [
        {
          id: 1, name: 'Aslam', permissions: ['view']
        },
        {
          id: 2, name: 'Jonwik', permissions: []
        }
      ],
      activeUserId: 2
    }
  },

  computed: {
    currentUser() {
      return this.users.find(user => user.id === this.activeUserId)
    }
  },

  methods: {
    setActiveUser(id) {
      this.activeUserId = id
    }
  }
}

const app = Vue.createApp(Example);

app.directive('can', {
  mounted(el, binding, vnode) {

    const vm = binding.instance

    const { value } = binding
    let { permissions } = vm.currentUser;

    if (value && value instanceof Array && value.length > 0) {
      const requiredPermissions = value
      const hasPermission = permissions.some(
        (permission) => requiredPermissions.includes(permission)
      )

      if (!hasPermission) {
        el.parentNode && el.parentNode.removeChild(el)
      }
    }

  },
})

app.mount('#app')