315 lines
7.3 KiB
Markdown
315 lines
7.3 KiB
Markdown
# authorityMenus 接口失败解决方案
|
||
|
||
## 🔧 问题描述
|
||
|
||
登录成功后，调用 `/sys_user/authorityMenus` 接口失败，导致无法获取完整的菜单数据。
|
||
|
||
## ✅ 解决方案
|
||
|
||
### 方案：使用默认菜单配置
|
||
|
||
当 `authorityMenus` 接口失败时，系统会自动使用默认的菜单配置，并根据登录接口返回的菜单 ID 数组进行过滤。
|
||
|
||
## 📁 新增文件
|
||
|
||
### `src/config/menuConfig.js`
|
||
|
||
这个文件包含了默认的菜单配置，包括：
|
||
|
||
1. **系统管理**
|
||
- 用户管理 (`/system/user`)
|
||
- 角色管理 (`/system/role`)
|
||
- 系统日志 (`/system/log`)
|
||
- 参数设置 (`/system/param`)
|
||
|
||
2. **高级管理**
|
||
- 菜单管理 (`/system_high/menu`)
|
||
- 控制管理 (`/system_high/control`)
|
||
- 系统标题 (`/system_high/title`)
|
||
|
||
3. **首页** (`/home`)
|
||
|
||
## 🔄 工作流程
|
||
|
||
### 1. 登录流程
|
||
|
||
```
|
||
用户登录
|
||
↓
|
||
调用 /sys_user/login 接口
|
||
↓
|
||
返回: { token, user, authorityMenus: "[1,142,121,...]" }
|
||
↓
|
||
保存 token 和用户信息
|
||
↓
|
||
解析 authorityMenus (字符串 → 数组)
|
||
↓
|
||
调用 /sys_user/authorityMenus 接口
|
||
↓
|
||
接口失败 ❌
|
||
↓
|
||
使用默认菜单配置 + 根据 ID 过滤
|
||
↓
|
||
生成路由
|
||
↓
|
||
登录成功 ✅
|
||
```
|
||
|
||
### 2. 菜单过滤逻辑
|
||
|
||
```javascript
|
||
// 登录返回的菜单 IDs
|
||
authorityMenus: "[1,142,121,143,144,145,124,147,120,123,125,...]"
|
||
|
||
// 解析为数组
|
||
menuIds: [1, 142, 121, 143, 144, 145, 124, 147, 120, 123, 125, ...]
|
||
|
||
// 从默认菜单配置中过滤出这些 ID 对应的菜单
|
||
filteredMenus = filterMenusByIds(menuIds, defaultMenus)
|
||
|
||
// 生成路由
|
||
routes = uiTool.getRoutes(Main, ParentView, Page404)
|
||
```
|
||
|
||
## 📝 代码修改
|
||
|
||
### 1. `src/store/user.js`
|
||
|
||
**导入默认菜单配置：**
|
||
```javascript
|
||
import { defaultMenus, filterMenusByIds } from '../config/menuConfig'
|
||
```
|
||
|
||
**修改 `setAuthorityMenus` 方法：**
|
||
```javascript
|
||
async setAuthorityMenus({ state, commit }, { Main, ParentView, Page404, authorityMenus, menuIds }) {
|
||
let menus = authorityMenus
|
||
|
||
if (!menus && userServerInstance) {
|
||
try {
|
||
// 尝试调用接口
|
||
let res = await userServerInstance.authorityMenus()
|
||
if (res && res.code === 0 && res.data) {
|
||
menus = res.data
|
||
}
|
||
} catch (error) {
|
||
console.error('获取权限菜单失败:', error)
|
||
console.warn('将使用默认菜单配置')
|
||
|
||
// 接口失败，使用默认菜单配置
|
||
if (menuIds && menuIds.length > 0) {
|
||
// 根据 ID 过滤菜单
|
||
menus = filterMenusByIds(menuIds, defaultMenus)
|
||
} else {
|
||
// 使用所有默认菜单
|
||
menus = defaultMenus
|
||
}
|
||
}
|
||
}
|
||
|
||
// ... 后续处理
|
||
}
|
||
```
|
||
|
||
**修改 `handleLogin` 方法：**
|
||
```javascript
|
||
async handleLogin({ state, commit, dispatch }, { userFrom, Main, ParentView, Page404 }) {
|
||
let res = await userServerInstance.login(userFrom)
|
||
|
||
let token = res.data.token
|
||
let user = res.data.user
|
||
let authorityMenusIds = res.data.authorityMenus
|
||
|
||
commit('setUserName', user.name.trim())
|
||
commit('setToken', token)
|
||
|
||
// 解析菜单 IDs
|
||
let menuIds = []
|
||
if (authorityMenusIds) {
|
||
if (typeof authorityMenusIds === 'string') {
|
||
menuIds = JSON.parse(authorityMenusIds)
|
||
} else if (Array.isArray(authorityMenusIds)) {
|
||
menuIds = authorityMenusIds
|
||
}
|
||
}
|
||
|
||
// 传递 menuIds，以便在接口失败时使用
|
||
await dispatch('setAuthorityMenus', {
|
||
Main,
|
||
ParentView,
|
||
Page404,
|
||
menuIds
|
||
})
|
||
}
|
||
```
|
||
|
||
## 🎯 测试步骤
|
||
|
||
### 1. 启动项目
|
||
```bash
|
||
cd demo-project
|
||
npm run dev
|
||
```
|
||
|
||
### 2. 登录测试
|
||
- 用户名：`zc`
|
||
- 密码：对应的密码
|
||
|
||
### 3. 查看控制台日志
|
||
|
||
**成功的日志：**
|
||
```
|
||
登录接口返回: { code: 0, data: { token, user, authorityMenus } }
|
||
登录返回的菜单 IDs: "[1,142,121,...]"
|
||
获取权限菜单失败: [错误信息]
|
||
将使用默认菜单配置
|
||
根据菜单 IDs 过滤后的菜单: [...]
|
||
最终处理的权限菜单: [...]
|
||
生成的主菜单: { path: '/', children: [...] }
|
||
```
|
||
|
||
### 4. 验证结果
|
||
|
||
登录成功后，应该能看到：
|
||
- ✅ 页面刷新
|
||
- ✅ 进入系统首页
|
||
- ✅ 左侧显示菜单（根据权限过滤）
|
||
- ✅ 顶部显示用户名
|
||
|
||
## 📊 菜单 ID 映射
|
||
|
||
根据登录返回的菜单 IDs：
|
||
```
|
||
[1,142,121,143,144,145,124,147,120,123,125,132,133,126,136,137,138,139,151,152,153,154,149,150,156,157,158,122,159,5,11,12,13,67,68,15]
|
||
```
|
||
|
||
默认菜单配置中包含的 IDs：
|
||
- `1` - 首页
|
||
- `5` - 系统管理
|
||
- `11` - 用户管理
|
||
- `12` - 角色管理
|
||
- `13` - 系统日志
|
||
- `15` - 参数设置
|
||
- `120` - 高级管理
|
||
- `122` - 菜单管理
|
||
- `123` - 控制管理
|
||
- `124` - 系统标题
|
||
|
||
过滤后会显示这些菜单。
|
||
|
||
## ⚠️ 注意事项
|
||
|
||
### 1. 默认菜单配置的限制
|
||
|
||
默认菜单配置只包含了常用的系统管理菜单。如果你的系统有其他业务菜单，需要：
|
||
|
||
**选项 A：扩展默认菜单配置**
|
||
|
||
编辑 `src/config/menuConfig.js`，添加更多菜单：
|
||
```javascript
|
||
export const defaultMenus = [
|
||
// ... 现有菜单
|
||
{
|
||
id: 200,
|
||
name: '业务管理',
|
||
path: '/business',
|
||
component: '',
|
||
parent_id: 0,
|
||
type: '菜单',
|
||
is_show_menu: 1,
|
||
icon: 'md-briefcase',
|
||
children: [
|
||
{
|
||
id: 201,
|
||
name: '订单管理',
|
||
path: '/business/order',
|
||
component: 'business/order',
|
||
parent_id: 200,
|
||
type: '页面',
|
||
is_show_menu: 1
|
||
}
|
||
]
|
||
}
|
||
]
|
||
```
|
||
|
||
**选项 B：修复后端接口**
|
||
|
||
这是推荐的长期方案。修复 `/sys_user/authorityMenus` 接口，使其返回完整的菜单对象数组。
|
||
|
||
### 2. 菜单组件路径
|
||
|
||
默认菜单配置中的 `component` 字段指向 `src/views/` 目录下的组件。
|
||
|
||
例如：
|
||
- `component: 'system/sys_user'` → `src/views/system/sys_user.vue`
|
||
- `component: 'home/index'` → `src/views/home/index.vue`
|
||
|
||
确保这些组件文件存在。
|
||
|
||
### 3. 菜单权限
|
||
|
||
即使使用默认菜单配置，也会根据登录返回的菜单 IDs 进行过滤。
|
||
|
||
用户只能看到他有权限的菜单。
|
||
|
||
## 🔧 后续优化建议
|
||
|
||
### 短期方案（当前实现）
|
||
✅ 使用默认菜单配置 + ID 过滤
|
||
- 优点：快速解决问题，用户可以登录
|
||
- 缺点：需要手动维护默认菜单配置
|
||
|
||
### 长期方案（推荐）
|
||
🎯 修复后端 `authorityMenus` 接口
|
||
- 优点：动态获取菜单，灵活性高
|
||
- 缺点：需要修改后端代码
|
||
|
||
**建议后端接口返回格式：**
|
||
```json
|
||
{
|
||
"code": 0,
|
||
"message": "请求成功",
|
||
"data": [
|
||
{
|
||
"id": 1,
|
||
"name": "首页",
|
||
"path": "/home",
|
||
"component": "home/index",
|
||
"parent_id": 0,
|
||
"type": "页面",
|
||
"is_show_menu": 1,
|
||
"icon": "md-home",
|
||
"sort": 1
|
||
},
|
||
{
|
||
"id": 5,
|
||
"name": "系统管理",
|
||
"path": "/system",
|
||
"component": "",
|
||
"parent_id": 0,
|
||
"type": "菜单",
|
||
"is_show_menu": 1,
|
||
"icon": "md-settings",
|
||
"sort": 2,
|
||
"children": [...]
|
||
}
|
||
]
|
||
}
|
||
```
|
||
|
||
## 🎉 总结
|
||
|
||
现在即使 `authorityMenus` 接口失败，系统也能：
|
||
1. ✅ 正常登录
|
||
2. ✅ 显示菜单（根据权限过滤）
|
||
3. ✅ 访问有权限的页面
|
||
4. ✅ 提供良好的用户体验
|
||
|
||
如果需要添加更多菜单，请编辑 `src/config/menuConfig.js` 文件。
|
||
|
||
---
|
||
|
||
**当前状态**：登录功能已修复，可以正常使用！🎉
|
||
|