Vue.js组件权限控制：如何根据用户权限禁用/隐藏组件

问题背景 #

我有多个Vue.js组件，需要根据用户权限限制访问特定组件，想知道如何禁用组件。目前已配置路由、授权函数和router-link，希望通过修改路由元信息中的showComponent值来控制组件是否显示，但不确定修改位置是否正确。

现有代码 #

路由配置 #

{
  path: "/administration",
  name: "Administration",
  component: PageAdministration,
  meta: {
    requiresAuth: true,
    neededPermissions: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11],
  },
},
{
  path: "/settings/overview",
  name: "SettingsOverview",
  component: PageSettingsOverview,
  meta: { requiresAuth: true, showComponent: true },
},
{ path: "/:notFound(.*)", name: "NotFound", component: NotFound },

授权函数（存在语法和逻辑问题） #

if (currentUser!== 0 and to?.meta?.neededPermissions!== 0), {
    for (let i = 0; i < currentUser.teams.length; i++) {
      const team = currentUser.teams[i];
      console.log(to.meta.neededPermissions);
      const validPermissions = team.permissions.filter((item) => {
        return to.meta.neededPermissions.includes(item.permissionType);
      });                                                                              
      const mappedValidPermissions = validPermissions.map((item) => {
        return item.permissionType;
      });                                                                               
      if (
        !to.meta.neededPermissions.every((i) =>
          mappedValidPermissions.includes(i)
        ) 
      ) {
        isAllowed = false;
        to.meta.showComponent= false
        next({ path: "/:notFound(.*)" });
        break;
      }
      else to.meta.showComponent= true
    }
    if (isAllowed) {
      next();
    }
  } else {
    next();    
  }

Router-Link 代码 #

<div class="col-12 col-md-4" v-if="$route.meta.showComponent">
  <router-link class="card" to="/administration">
    <div class="card-img-top">
      <i class="hi hi-people" />
    </div>
    <div class="card-body">
      <h5 class="card-title">Teams & Users</h5>
    </div>
  </router-link>
</div>

解决方案 #

1. 修复并优化授权函数 #

在路由全局守卫beforeEach中修改授权逻辑，确保正确判断权限并同步更新路由元信息：

router.beforeEach((to, from, next) => {
  let isAllowed = true;
  // 替换为实际获取当前用户的方式（如Vuex、localStorage）
  const currentUser = window.localStorage.getItem('currentUser') 
   ? JSON.parse(window.localStorage.getItem('currentUser')) 
    : null;

  // 仅对有权限要求的路由进行校验
  if (currentUser && Array.isArray(to.meta?.neededPermissions) && to.meta.neededPermissions.length > 0) {
    // 检查用户是否有任一团队满足所有所需权限
    const hasValidTeam = currentUser.teams.some(team => {
      const userPermissionTypes = team.permissions.map(item => item.permissionType);
      return to.meta.neededPermissions.every(perm => userPermissionTypes.includes(perm));
    });

    isAllowed = hasValidTeam;
    // 更新当前路由的元信息
    to.meta.showComponent = isAllowed;
    // 同步更新路由配置中的对应记录，确保菜单能读取到最新状态
    const targetRoute = router.options.routes.find(route => route.name === to.name);
    if (targetRoute) {
      targetRoute.meta.showComponent = isAllowed;
    }

    if (!isAllowed) {
      // 通过路由name跳转404，避免硬编码路径
      next({ name: "NotFound" });
      return;
    }
  } else {
    // 无权限要求的路由，默认设置showComponent为true（可根据需求调整）
    if (to.meta.hasOwnProperty('showComponent')) {
      to.meta.showComponent = true;
      const targetRoute = router.options.routes.find(route => route.name === to.name);
      if (targetRoute) {
        targetRoute.meta.showComponent = true;
      }
    }
  }

  next();
});

2. 优化Router-Link的显示判断 #

菜单中的router-link需要读取路由配置中的元信息，而非当前路由的元信息，因此添加方法获取对应路由的元信息：

<template>
  <div class="col-12 col-md-4" v-if="getRouteShowStatus('Administration')">
    <router-link class="card" to="/administration">
      <div class="card-img-top">
        <i class="hi hi-people" />
      </div>
      <div class="card-body">
        <h5 class="card-title">Teams & Users</h5>
      </div>
    </router-link>
  </div>
</template>

<script>
export default {
  methods: {
    getRouteShowStatus(routeName) {
      const route = this.$router.options.routes.find(r => r.name === routeName);
      // 默认返回false，避免未配置路由显示
      return route?.meta?.showComponent || false;
    }
  }
};
</script>

关键说明 #

• 同步路由元信息：仅修改to.meta只能影响当前跳转的路由，菜单需要从router.options.routes读取配置，因此必须同步更新这里的元信息。
• 简化权限判断：使用Array.some和Array.every替代循环，逻辑更简洁高效。
• 避免硬编码：通过路由name跳转404，而非直接写path，提升代码可维护性。
• 默认状态处理：对无权限要求的路由统一设置默认显示状态，避免遗漏配置。

内容的提问来源于stack exchange，提问作者Mr. A