155 lines
3.9 KiB
Markdown
155 lines
3.9 KiB
Markdown
# 动态菜单系统使用指南
|
||
|
||
## 概述
|
||
|
||
本系统实现了基于后端权限数据的动态菜单功能，不同用户根据其权限展示不同的后台菜单栏。
|
||
|
||
## 实现原理
|
||
|
||
### 1. 后端接口
|
||
- **接口地址**: `/admin/permission/user/tree`
|
||
- **请求方法**: GET
|
||
- **返回数据**: 用户权限菜单树结构
|
||
|
||
### 2. 数据结构
|
||
```json
|
||
{
|
||
"code": 200,
|
||
"message": "OK",
|
||
"data": [
|
||
{
|
||
"id": 1,
|
||
"name": "系统管理",
|
||
"code": null,
|
||
"type": 1,
|
||
"path": "/system",
|
||
"component": "",
|
||
"icon": "Setting",
|
||
"sort": 1,
|
||
"status": 1,
|
||
"children": [
|
||
{
|
||
"id": 11,
|
||
"name": "配置列表",
|
||
"code": "settled:config:list",
|
||
"type": 2,
|
||
"path": "/settledConfig/list",
|
||
"component": "/SettledConfig/List",
|
||
"icon": "",
|
||
"sort": 1,
|
||
"status": 1,
|
||
"children": []
|
||
}
|
||
]
|
||
}
|
||
]
|
||
}
|
||
```
|
||
|
||
### 3. 权限类型说明
|
||
- **type: 1** - 目录（一级菜单）
|
||
- **type: 2** - 菜单（二级菜单）
|
||
- **type: 3** - 接口权限（按钮权限）
|
||
|
||
## 核心组件
|
||
|
||
### 1. DynamicSidebar.vue
|
||
动态侧边栏组件，负责：
|
||
- 获取用户权限菜单数据
|
||
- 根据权限过滤菜单项
|
||
- 渲染菜单树结构
|
||
- 处理图标映射
|
||
|
||
### 2. 权限过滤逻辑
|
||
```javascript
|
||
const filterMenuByPermission = (menuItems: any[]): any[] => {
|
||
return menuItems.map(item => {
|
||
// 递归过滤子菜单
|
||
if (item.children && item.children.length > 0) {
|
||
const filteredChildren = filterMenuByPermission(item.children)
|
||
return { ...item, children: filteredChildren }
|
||
}
|
||
return item
|
||
}).filter(item => {
|
||
// 目录类型：检查是否有可显示的子菜单
|
||
if (item.type === 1) {
|
||
return item.children && item.children.length > 0
|
||
}
|
||
// 菜单类型：检查权限
|
||
if (item.type === 2) {
|
||
return item.code ? hasPermission(item.code) : true
|
||
}
|
||
return false
|
||
})
|
||
}
|
||
```
|
||
|
||
## 使用方法
|
||
|
||
### 1. 后端配置
|
||
确保后端接口 `/admin/permission/user/tree` 返回正确的权限菜单数据。
|
||
|
||
### 2. 前端配置
|
||
系统已自动配置，无需额外设置。布局组件会自动使用 `DynamicSidebar` 组件。
|
||
|
||
### 3. 图标配置
|
||
在 `DynamicSidebar.vue` 中的 `iconMap` 对象中添加新图标：
|
||
```javascript
|
||
const iconMap = {
|
||
'Setting': Setting,
|
||
'Shop': Shop,
|
||
'Notebook': Notebook,
|
||
// 添加新图标
|
||
'NewIcon': NewIconComponent
|
||
}
|
||
```
|
||
|
||
## 权限控制
|
||
|
||
### 1. 菜单级权限
|
||
通过后端返回的菜单树数据控制，只返回用户有权限的菜单项。
|
||
|
||
### 2. 路由级权限
|
||
在路由配置中使用 `meta.permission` 字段：
|
||
```javascript
|
||
{
|
||
path: '/user/list',
|
||
component: () => import('@/views/User/List.vue'),
|
||
meta: { title: '用户列表', permission: 'user:list:view' }
|
||
}
|
||
```
|
||
|
||
### 3. 按钮级权限
|
||
使用权限指令：
|
||
```html
|
||
<!-- 单个权限 -->
|
||
<el-button v-permission="'user:add'">添加用户</el-button>
|
||
|
||
<!-- 多个权限（任意一个） -->
|
||
<el-button v-permission="['user:add', 'user:edit']">操作</el-button>
|
||
|
||
<!-- 所有权限都需要 -->
|
||
<el-button v-permission-all="['user:add', 'user:edit']">高级操作</el-button>
|
||
```
|
||
|
||
## 注意事项
|
||
|
||
1. **权限初始化**: 系统在启动时会自动初始化用户权限，确保权限数据可用。
|
||
|
||
2. **菜单刷新**: 如果用户权限发生变化，需要重新登录或刷新页面以获取最新菜单。
|
||
|
||
3. **图标缺失**: 如果菜单项的图标在 `iconMap` 中不存在，会使用默认的 `Setting` 图标。
|
||
|
||
4. **路径匹配**: 确保菜单项的 `path` 字段与路由配置中的路径一致。
|
||
|
||
## 扩展功能
|
||
|
||
### 1. 添加新菜单类型
|
||
可以在权限过滤逻辑中添加对新菜单类型的支持。
|
||
|
||
### 2. 自定义菜单样式
|
||
可以在 `DynamicSidebar.vue` 的样式部分自定义菜单外观。
|
||
|
||
### 3. 菜单缓存
|
||
可以考虑添加菜单数据缓存机制，减少API调用次数。
|