Vue中权限的配置

基于后台接口实现权限的控制

前端不管谁进入到对应的系统中，都可以看到所有的菜单，一旦没有权限的人，在对应的菜单中发起了网络请求，则后台会返回“没有权限等相关信息”
前端控制

固定角色

我们可以在对应的路由的meta中配置一个字段role: [‘admin’, ‘pic’, ‘product’]，如果都可以访问该菜单，则不写，如果要去限制对应的角色可以访问，则添加对应的角色名。
当我们进行登录时，后台会返回给我们对应用户的角色，拿到角色和路由表进行筛选，得到一个新的路由表

function filterRoutes (role, routes) {
  const _routes = []
  for (let i = 0; i < routes.length; i++) {
    if (routes[i].role.some(_role => _role === role)) {
      if (routes[i].children) {
        const childrenRoutes = filterRoutes(role, routes[i].children)
        console.log(childrenRoutes)
        routes[i].children = childrenRoutes
      }
      _routes.push(routes[i])
    }
  }
  return _routes
}

最终将筛选得到的路由表动态添加到路由中
router.addRoutes(筛选后的路由)

自定义角色

RBAC 角色控制权限的操作。先创建角色，选择对应的权限，再创建用户，选择对应的角色
当登录时，后台返回的是该用户所有的权限，利用权限数据和我们的asyncRoutes进行筛选，筛选后将筛选的路由配置添加到对应的路由中router.addRoutes