How to Disable the Vue component (div-tag)?-CodePudding

I am trying to disable the VUE component based on the user access settings. Now, I am able to hide the component from the UI, but after every re-render, the component is getting active. I don't just want to hide the component; I want to prevent the user from clicking the component. I couldn't find the exact solution to my problem. Thank you in advance.

This is the route and beforeEach route condition:

 {
    path: "/settings/overview",
    name: "SettingsOverview",
    component: PageSettingsOverview,
    meta: {
      requiresAuth: true,
      showComponent: true,
      componentAccessPermissions: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11],
    },
  },

**beforeEach**

 const currentLogUser = store.getters["auth/currentUser"];
    if (
      currentLogUser !== null &&
      to?.meta?.componentAccessPermissions !== undefined
    ) {
      for (let i = 0; i < currentLogUser.teams.length; i  ) {
        const team = currentLogUser.teams[i];
        const valPermissions = team.permissions
          .filter((item) => {
            return to.meta.componentAccessPermissions.includes(
              item.permissionType
            );
          })
          .map((item) => {
            return item.permissionType;
          });
        const allowAccess = to.meta.componentAccessPermissions.every((i) =>
          valPermissions.includes(i)
        );
        if (!allowAccess) {
          to.meta.showComponent = false;
        } else {
          to.meta.showComponent = true;
        }
      }
    }

VueFile:

<div  v-if='$route.meta.showComponent' @click.prevent>
        <router-link  to="/administration" >
          <div >
            <i  />
          </div>
          <div >
            <h5 >Teams & Users</h5>
          </div>
        </router-link>
      </div>

CodePudding user response：

Toggle pointer-events in CSS to prevent the user from interacting with your component;

<div :>
    <router-link  to="/administration" >
        <div >
            <i  />
        </div>
        <div >
            <h5 >Teams & Users</h5>
        </div>
    </router-link>
</div>

If you don't have bootstrap;

<div  :style="`${$route.meta.showComponent ? 'pointer-events: none' : ''}`">
    <router-link  to="/administration" >
        <div >
            <i  />
        </div>
        <div >
            <h5 >Teams & Users</h5>
        </div>
    </router-link>
</div>

CodePudding user response：

Return false from beforeEach function to cancel the routing, this way, user won't be able to load that component if it's managed by vue-router.

Documentation with examples