In my application, I've implemented a directive that dynamically displays buttons based on the user's role permissions:
import { store } from '../store/';
import * as types from '../store/types';
const hide = vnode => {
if (vnode.elm.parentElement) {
vnode.elm.parentElement.removeChild(vnode.elm);
}
};
export const userRole = {
update(el, binding, vnode) {
const userId = store.getters[types.GET_USER_ID];
const { value, modifiers } = binding;
if (value.role) {
if (Reflect.has(modifiers, 'manager')) {
if (value.role[0] !== userId) hide(vnode);
}
};
Each button in the UI is defined with the following structure:
<vue-button
v-userRole.manager="{role: job.role}"
@click.prevent.stop="e => payoutJob(job.id)"
>
Button Text
</vue-button>
One issue I'm facing is that all buttons are initially displayed upon page load, causing a flash of unnecessary elements before the correct buttons are shown based on user roles. Is there a way to prevent this flashing effect?
I would prefer to have no buttons visible until the logged-in user's role is verified against the directive file.
User information is stored locally, in Vuex, and each page checks for signed-in users during loading.