首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >如何从类似角色数组的api动态设置vue上的路由器元

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

Stack Overflow用户
提问于 2019-07-08 19:33:18
回答 1查看 1.9K关注 0票数 0

我有一个动态的角色系统,管理员可以添加或删除的角色。我在这个角色访问级别的基础上搜索如何在meta as数组中的vue路由器中添加角色,我正尝试通过存储它不工作来添加它。如何从API中获取角色并在vue路由器中进行设置?也许我做错了,因为我是vuejs的新手,可以帮助我,谢谢。

我尝试添加vuex store来添加路由器meta,但我在store中有角色,没有在路由器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
    }, ```
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2019-07-08 19:55:54

因为(非反应式)路由对象是在vuex存储中的相关信息出现之前创建的(很可能您的store.getters.roles请求还没有得到满足),所以它仍然是空的。一种解决方案是将一个函数放在元对象中,只要访问系统执行其角色检查,就可以调用该函数:meta: { roles: () => store.getters.roles }。只需根据导航请求检查route.meta.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()
})
票数 2
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/56934037

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档