菜单权限管理实战！结合 Vue 实现动态权限控制

前端

2023-12-16 03:16:13

背景

权限管理是现代应用开发中至关重要的一环，它决定了不同用户对系统资源的访问权限。在后端开发中，权限管理主要体现在对接口访问的控制；而在前端开发中，则主要体现为对菜单访问权限的控制。

结合 Vue 实现菜单动态权限控制

以 Vue 为例，我们可以通过以下步骤实现菜单动态权限控制：

获取用户权限列表 ：通过后端接口获取当前用户的权限列表，并存储在 Vuex 状态管理中。
过滤菜单项 ：遍历菜单项，根据权限列表过滤出用户有权访问的菜单项。
动态生成菜单 ：根据过滤后的菜单项，动态生成菜单结构，并展示在页面中。

技术要点

权限列表的获取和存储 ：通过 axios 等 HTTP 库发起后端请求，获取用户权限列表。使用 Vuex 状态管理存储权限列表，以便在整个应用中共享。
菜单项的过滤 ：遍历菜单项，逐一检查菜单项对应的权限是否包含在用户权限列表中。如有则保留，否则移除。
菜单的动态生成 ：根据过滤后的菜单项，使用递归或其他方法生成菜单结构。

案例演示

<template>
  <ul>
    <li v-for="menu in filteredMenus">
      <a :href="menu.path">{{ menu.label }}</a>
    </li>
  </ul>
</template>

<script>
import { mapState } from 'vuex'

export default {
  computed: {
    ...mapState('user', ['permissions']),
    filteredMenus() {
      return this.menus.filter(menu => this.permissions.includes(menu.permission))
    }
  },
  data() {
    return {
      menus: [
        { path: '/home', label: '首页', permission: 'home' },
        { path: '/users', label: '用户管理', permission: 'user' },
        { path: '/roles', label: '角色管理', permission: 'role' }
      ]
    }
  }
}
</script>