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

Question

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

Answer 1

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

// 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')
  }
  })
  

  这个简单实现了菜单和按钮权限管理的基本功能。可以根据实际需求进行扩展和改进。