vue实现权限菜单

Vue实现权限菜单的方法

动态路由配置

通过后端返回的权限菜单数据动态生成路由配置。使用vue-router的addRoutes方法动态添加路由。

// 示例：动态添加路由
const router = new VueRouter({ routes: [] })
const asyncRoutes = [
  { path: '/admin', component: Admin, meta: { role: 'admin' } },
  { path: '/user', component: User, meta: { role: 'user' } }
]
router.addRoutes(asyncRoutes)

菜单数据过滤

根据用户角色过滤菜单数据，只显示有权限访问的菜单项。可以在前端或后端进行过滤。

// 前端过滤示例
function filterMenus(menus, role) {
  return menus.filter(menu => {
    return !menu.meta || !menu.meta.role || menu.meta.role.includes(role)
  })
}

权限验证

在路由守卫中进行权限验证，检查用户是否有权限访问目标路由。

router.beforeEach((to, from, next) => {
  const userRole = getUserRole()
  if (to.meta.role && !to.meta.role.includes(userRole)) {
    next('/forbidden')
  } else {
    next()
  }
})

菜单组件实现

创建可复用的菜单组件，根据权限数据动态渲染菜单项。

<template>
  <div>
    <div v-for="menu in filteredMenus" :key="menu.path">
      <router-link :to="menu.path">{{ menu.title }}</router-link>
    </div>
  </div>
</template>

<script>
export default {
  computed: {
    filteredMenus() {
      return filterMenus(this.menus, this.userRole)
    }
  }
}
</script>

后端接口设计

后端应提供获取用户权限菜单的接口，返回结构化的菜单数据。

// 示例返回数据
[
  {
    "path": "/dashboard",
    "name": "Dashboard",
    "meta": {
      "role": ["admin", "user"]
    }
  }
]

状态管理

使用Vuex管理权限状态，集中存储菜单数据和用户角色。

const store = new Vuex.Store({
  state: {
    menus: [],
    role: ''
  },
  mutations: {
    setMenus(state, menus) {
      state.menus = menus
    }
  }
})

按钮级权限

对于按钮级别的权限控制，可以使用自定义指令实现。

Vue.directive('permission', {
  inserted(el, binding) {
    if (!hasPermission(binding.value)) {
      el.parentNode.removeChild(el)
    }
  }
})

<button v-permission="'create'">创建</button>

通过以上方法组合使用，可以实现完整的Vue权限菜单系统。根据项目需求选择适合的方案，或组合多种方法实现更精细的权限控制。