前端菜单管理和按钮权限管理

vue有没有简易版的菜单管理和按钮权限管理，麻烦大家解答下，谢谢！

这里是一个简单的菜单和权限管理的实现:
菜单管理:

// menu.js
export default [
  {
    name: '首页',
    path: '/home',
    meta: {
      icon: 'home'
    }
  },
  {
    name: '用户管理',
    path: '/user',
    meta: {
      icon: 'user'
    },
    children: [
      {
        name: '用户列表',
        path: '/user/list'
      },
      {
        name: '添加用户',
        path: '/user/add'
      }
    ]
  }
]

然后在路由中使用:

import menu from './menu'

const routes = menu.map(item => {
  return {
    path: item.path,
    component: () => import(`@/views/${item.path}`),
    meta: item.meta
  }
})

权限管理:

  • 在用户对象中定义用户权限,比如:
    const user = {
permissions: ['用户管理', '添加用户']
}
  • 在路由的meta中定义权限,比如:
    {
name: '用户列表',
path: '/user/list',
meta: {
  permission: '用户管理'
}
}
  • 在路由前置守卫中判断权限,实现权限管理:
    router.beforeEach((to, from, next) => {
const permissions = user.permissions
if (to.meta.permission && permissions.includes(to.meta.permission)) {
  next()
} else {
  next('/403')
}
})
    这个简单实现了菜单和按钮权限管理的基本功能。可以根据实际需求进行扩展和改进。