zc/admin_core

Fork 0

Files

张成 845658f193 1

2025-10-08 18:53:38 +08:00

7.3 KiB

Raw Blame History

authorityMenus 接口失败解决方案

🔧 问题描述

登录成功后，调用 /sys_user/authorityMenus 接口失败，导致无法获取完整的菜单数据。

✅ 解决方案

方案：使用默认菜单配置

当 authorityMenus 接口失败时，系统会自动使用默认的菜单配置，并根据登录接口返回的菜单 ID 数组进行过滤。

📁 新增文件

`src/config/menuConfig.js`

这个文件包含了默认的菜单配置，包括：

系统管理
- 用户管理 (/system/user)
- 角色管理 (/system/role)
- 系统日志 (/system/log)
- 参数设置 (/system/param)
高级管理
- 菜单管理 (/system_high/menu)
- 控制管理 (/system_high/control)
- 系统标题 (/system_high/title)
首页 (/home)

🔄 工作流程

1. 登录流程

用户登录
  ↓
调用 /sys_user/login 接口
  ↓
返回: { token, user, authorityMenus: "[1,142,121,...]" }
  ↓
保存 token 和用户信息
  ↓
解析 authorityMenus (字符串 → 数组)
  ↓
调用 /sys_user/authorityMenus 接口
  ↓
接口失败 ❌
  ↓
使用默认菜单配置 + 根据 ID 过滤
  ↓
生成路由
  ↓
登录成功 ✅

2. 菜单过滤逻辑

// 登录返回的菜单 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`

导入默认菜单配置：

import { defaultMenus, filterMenusByIds } from '../config/menuConfig'

修改 setAuthorityMenus 方法：

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 方法：

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. 启动项目

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，添加更多菜单：

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 接口

优点：动态获取菜单，灵活性高
缺点：需要修改后端代码

建议后端接口返回格式：

{
    "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 接口失败，系统也能：

✅ 正常登录
✅ 显示菜单（根据权限过滤）
✅ 访问有权限的页面
✅ 提供良好的用户体验

如果需要添加更多菜单，请编辑 src/config/menuConfig.js 文件。

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

7.3 KiB Raw Blame History Unescape Escape