JAVASCRIPT
Create a Custom Vue 3 Directive for Role-Based Element Visibility
Implement a reusable Vue 3 custom directive (`v-role`) to easily control the visibility of DOM elements based on user roles or permissions.
// src/directives/role.js
export default {
mounted(el, binding) {
const userRoles = ['admin', 'editor']; // Example: Get this from your auth store
const requiredRoles = Array.isArray(binding.value) ? binding.value : [binding.value];
const hasPermission = requiredRoles.some(role => userRoles.includes(role));
if (!hasPermission) {
el.style.display = 'none'; // Or remove el.parentNode.removeChild(el);
}
},
// Optionally update if roles change dynamically
updated(el, binding) {
const userRoles = ['admin', 'editor'];
const requiredRoles = Array.isArray(binding.value) ? binding.value : [binding.value];
const hasPermission = requiredRoles.some(role => userRoles.includes(role));
if (hasPermission) {
el.style.display = ''; // Restore display
} else {
el.style.display = 'none';
}
}
};
// src/main.js
import { createApp } from 'vue';
import App from './App.vue';
import RoleDirective from './directives/role';
const app = createApp(App);
app.directive('role', RoleDirective);
app.mount('#app');
// src/App.vue (or any component)
<template>
<div>
<h1 v-role="'admin'">Admin Dashboard</h1>
<p v-role="['admin', 'editor']">Content for Admins and Editors</p>
<button v-role="'guest'">Guest Button</button>
</div>
</template>
How it works: This snippet creates a custom Vue 3 directive `v-role` that conditionally hides elements based on the user's roles. The `mounted` hook checks if the user has any of the required roles specified by `binding.value`. If not, it sets the element's `display` style to `none`. The `updated` hook ensures reactivity if the roles change. This provides a clean, declarative way to manage UI element visibility for authorization.