Question

我有一个动态的角色系统，管理员可以添加或删除该角色。我基于此角色访问级别搜索如何在meta中以阵列形式在vue路由器中添加角色我试图通过存储将其添加不起作用。如何从API获取角色并在vue路由器中进行设置？也许我做错了方向，因为我是vuejs的新手，可以帮助我。

我尝试添加vuex存储以添加路由器meta，但是我在存储中的角色未在路由器meta上设置

      name: 'Home',
      component: Home,
      children: [
        {
          path: '/users',
          meta: { label: 'Users', role: store.getters.roles },
          component: Users
        }]```


``` path: '/',
      name: 'Home',
      component: Home,
      children: [
        {
          path: '/users',
          meta: { label: 'Users', role: ['admin','staf'] },
          component: Users
        }, ```

Answer 1

由于（非反应性）路由对象是在vuex存储中的相关信息出现之前创建的（很可能尚未满足您的API请求），因此store.getters.roles仍然为空或为空。解决方案是改为在元对象中放置一个函数，只要访问系统执行其角色检查，即可调用该函数：meta: { roles: () => store.getters.roles }。只需根据导航请求检查route.meta.roles()。

旧答案（错误解释的问题）

我不确定您要对vuex商店做什么，但是我想您正在尝试使所有角色都可以访问“主页”。我建议您只是从这些路由中删除role字段（我也将其重命名为roles，因为它可以是多个，但这取决于您）。然后，要执行访问系统，请使用以下内容：


router.beforeEach((to, from, next) => {
  const user = yourAuthentication.user
  const lacksRole = to.matched.some(route => {
    return route.meta.roles && !route.meta.roles.includes(user.role)
  })

  if (lacksRole) {
    return next(false)  // Aborts the navigation request
  }

  // Route either doesn't require any role or user has one of the 
  // roles specified in the route meta object, continue navigation
  next()
})

如何从像角色数组这样的api动态设置vue上的路由器meta

1 个答案:

旧答案（错误解释的问题）