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

Question

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

在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

您能否指导我了解有关如何验证角色是否可以访问页面的逻辑？

Answer 1

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

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}。