如何动态地从类似于角色数组的api设置vue上的路由器元数据

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (27)

我有一个动态角色系统,管理员可以添加或删除该角色。我搜索如何在元数据库中添加角色作为数组基于此角色访问级别我试图通过存储它添加它无法正常工作。如何从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
        }, ```
提问于
用户回答回答于

因为(非反应性)路由对象是在vuex存储中的相关信息存在之前创建的(因为很可能您的API请求尚未完成),store.getters.roles所以仍然为空或为空。一个解决方案是将一个函数放在元对象中,只要访问系统进行角色检查就可以调用它:meta: { roles: () => store.getters.roles }。只需检查route.meta.roles()导航请求即可。

老答案(误解的问题)

我不确定你要对vuex商店做什么,但我想你正试图让所有角色都可以访问'Home'。我建议做的只是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()
})

扫码关注云+社区

领取腾讯云代金券