Vue 3 Custom Directives- Links Show/Hide via Permissions

Hello Dev, If you are facing issues to show/hide links according to permissions accessed to specific user I will show you how you will manage in simple way using Vue Custom Directives.

First of all get all permissions using axios API call from back server and just simply store it in VUEX store or any where you want as per your functionalities. Here I'll show simple hard coded permissions in VUEX Store. Here I've created 3 permissions for demonstrate purpose.

export default createStore(
? state: {
?
 ? ? settings: [],
?
 ? ? posts: [],

? ? ?permissions: [
? ? ? 'browse users',
? ? ? 'browse posts',
? ? ? 'browse staff',
? ? ? ],

? }
});        

Now create a global directive on resources/js/app.js with the name of "can" but its totally up to you. Any time of name you want to assign. But remember this name will be used in every where to show/hide elements.

Here are 3 parameters in closure function:

el => element at which can directive is being applied.

binding => value passed via element using directive

vnode => The virtual node produced by Vue's compiler.

var permissions = store.state.permissions;        

Here in the top of code I've get the all permissions from VUEX store.

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


	var permissions = store.state.permissions;
	? ??


	? ? if(permissions.includes(binding.value))
	? ? {
	? ? 	return vnode.el.hidden = false;
? ? ? ? }
? ? ? ? else
? ? ? ? {? ? ? ? ? ?
? ? ? ? 	return vnode.el.hidden = true;


? ? ? ? }




})        

Here you are checking if the permission you supplied on the directive is on the permission array. If found then it will hide the element else show, this function is like a v-if.

Use it like this on your component - "browse users" is your permissions.

    <router-link 
                :to="{ name: 'users'}" 
                class="nav-link" 
                v-can="'browse users'">
          Users
    </router-link>        

Thanks!