vue js如何验证特定角色的特定路由

时间:2018-03-27 05:52:14

标签: vuejs2 vue-router

在我的应用程序中,用户希望能够从界面创建角色,并将页面分配给角色。这意味着角色和路线都是动态的。

example中,在客户端中定义了到角色的路由。我们必须假设用户必须处于某个角色才能访问该页面。但我不知道需要为这些页面分配哪个角色?

目前我所知道的是,我们可以在访问页面之前检查用户是否经过身份验证,但我在逻辑上阻碍检查具有特定角色的用户是否无法访问这些页面。

据我所知,我可以使用

验证路线逻辑
router.beforeEach((to, from, next) => {
   //how to validate 
})

目前,我的网页如下所示

items: [
    {
      name: 'Dashboard',
      url: '/dashboard',
      icon: 'icon-speedometer'
    },
    {
      name: 'Base',
      url: '/base',
      icon: 'icon-puzzle',
      children: [
        {
          name: 'Cards',
          url: '/base/cards',
          icon: 'icon-puzzle'
        },
        {
          name: 'Forms',
          url: '/base/forms',
          icon: 'icon-puzzle'
        }
      ]
    }
  ]

我在客户端也有其他信息。

DisplayPicture
FullName
Role
RoleHierarchy
RoleId
UserId

您能否指导我如何验证角色是否可供角色访问?

1 个答案:

答案 0 :(得分:0)

这是我用来检查当前用户是否可以访问该页面的代码。

router.beforeEach((to, from, next) => {
  // Permission based routing
  if (to.matched.some(record => record.meta.conditionalRoute)) {
    if (to.name === 'Administration') {
      if (hasRole('Admin')) {
        next()
      }
    }
    next(false)
  } else {
    next()
  }
})

在上面的示例中,如果to.name的名称是“Administration”,则检查当前用户的角色是“Admin”还是将其重定向回上一页。

您还需要将meta: {conditionalRoute: true}添加到需要应用条件路由的路由中。