权限继承时子路由没生效，是我写错了吗？

司马心霞提问于 2026-03-04 17:39:18 阅读 6

安全

我在做后台系统的权限控制，父路由设置了权限，子路由按理说应该继承才对，但实际访问时子页面还是被拦住了，有点搞不懂。

我试过在父级 meta 里加 auth 字段，也确认了路由守卫里有读取 meta.auth，但子路由好像没拿到这个值。是不是 Vue Router 的嵌套路由不会自动继承 meta 啊？

<!-- router.js 示例 -->
{
  path: '/admin',
  component: AdminLayout,
  meta: { auth: ['admin'] },
  children: [
    {
      path: 'users',
      component: UserList
      // 这里没写 meta，期望继承父级的 auth
    }
  ]
}

我来解答赞 1 收藏

反馈

1 条解答

美玲~ Lv1

Vue Router 确实不会自动合并 meta 字段，这个坑很多人都踩过。它把父子路由的 meta 分开了，你在守卫里只读了当前路由的 meta，自然拿不到父级的。

最简单的办法是在路由守卫里遍历 to.matched 数组，这个数组包含了从父到子的所有路由记录。只要其中任何一个 record 有 auth，就认为需要鉴权。

代码大概这么改，复制过去试试：

router.beforeEach((to, from, next) => {

  // to.matched 是一个数组，包含父路由到子路由的所有记录

  // 找到任意一个带有 auth 的路由记录

  const record = to.matched.find(r => r.meta && r.meta.auth);



  if (record) {

    // 拿到权限要求，校验用户身份

    const requiredAuth = record.meta.auth;

    const userRole = store.getters.role; // 假设你存了用户角色



    if (requiredAuth.includes(userRole)) {

      next();

    } else {

      next('/403'); // 没权限跳哪自己定

    }

  } else {

    next();

  }

});

这样写的话，子路由不用写 meta，只要父级写了，to.matched 里就能查到，权限控制就能生效了。

2026-03-04 17:49