如何从 api 像角色数组动态地在 vue 上设置路由器元

Question

我有一个动态角色系统，管理员可以添加或删除角色。我搜索如何在元数据中添加 vue 路由器中的角色作为基于此角色访问级别的数组 我正在尝试通过商店添加它不起作用。如何从 API 获取角色并将其设置在 vue 路由器中？也许我做错了，因为我是 vuejs 的新手，可以帮助我谢谢。

我尝试添加 vuex 商店以添加路由器元，但我在商店中有角色没有在路由器元上设置它

      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 仍然为空或 null。一个解决方案是在元对象中放置一个函数，只要访问系统进行角色检查，就可以调用该函数：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()
})