# 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` 文件。

---

**当前状态**：登录功能已修复，可以正常使用！🎉