xiaozhang/guoyu

Fork 0

xiao12feng8 a0fb622e7f 重新编译配置

2025-12-06 20:11:36 +08:00

4.3 KiB

Raw Blame History

页面空白问题排查指南

问题现象

访问 http://1.15.149.24:20002/system/user 时，页面显示空白，只显示"正在加载系统资源，请耐心等待"。

问题原因分析

/system/user 是动态路由，需要从后端获取菜单数据后动态生成。页面空白通常由以下原因导致：

API 调用失败
- GetInfo API 调用失败（401 或其他错误）
- getRouters API 调用失败
权限问题
- 用户没有 system:user:list 权限
- 路由没有被生成
路由生成失败
- 后端返回的菜单数据格式不正确
- 前端路由处理逻辑出错

排查步骤

步骤 1：检查浏览器控制台

打开浏览器开发者工具（F12）
查看 Console 标签，检查是否有错误信息
查看 Network 标签，检查以下请求：
- /getInfo - 获取用户信息
- /getRouters - 获取路由菜单

步骤 2：检查 API 请求状态

在 Network 标签中检查：

/getInfo 请求
- 状态码是否为 200
- 响应中是否包含 roles 和 permissions
- 如果返回 401，说明 token 无效或过期
/getRouters 请求
- 状态码是否为 200
- 响应中是否包含 /system/user 相关的菜单数据
- 如果返回 401，说明权限不足

步骤 3：检查数据库权限配置

执行以下 SQL 查询，检查用户是否有 system:user:list 权限：

-- 检查用户是否有 system:user:list 权限
SELECT DISTINCT
    u.user_name,
    m.perms
FROM sys_user u
INNER JOIN sys_user_role ur ON u.user_id = ur.user_id
INNER JOIN sys_role r ON ur.role_id = r.role_id
INNER JOIN sys_role_menu rm ON r.role_id = rm.role_id
INNER JOIN sys_menu m ON rm.menu_id = m.menu_id
WHERE u.user_name = 'admin'  -- 替换为你的用户名
  AND m.perms LIKE 'system:user:%'
ORDER BY m.perms;

步骤 4：检查后端日志

查看后端应用日志，检查是否有以下错误：

权限检查失败
Token 解析失败
菜单查询失败

解决方案

方案 1：清除缓存并重新登录

清除浏览器 Cookie 和缓存
清除 Redis 缓存（或重启 Redis）
重新登录系统

方案 2：检查并修复权限配置

如果 SQL 查询显示缺少 system:user:list 权限：

检查菜单是否存在：

SELECT menu_id, menu_name, perms 
FROM sys_menu 
WHERE perms = 'system:user:list';

如果菜单存在，检查角色是否关联：

SELECT r.role_id, r.role_name, m.perms
FROM sys_role r
INNER JOIN sys_role_menu rm ON r.role_id = rm.role_id
INNER JOIN sys_menu m ON rm.menu_id = m.menu_id
WHERE m.perms = 'system:user:list';

如果角色未关联，执行修复：

-- 为所有角色添加 system:user:list 权限（如果菜单存在）
INSERT INTO sys_role_menu (role_id, menu_id)
SELECT DISTINCT
    r.role_id,
    (SELECT menu_id FROM sys_menu WHERE perms = 'system:user:list' LIMIT 1) as menu_id
FROM sys_role r
WHERE NOT EXISTS (
    SELECT 1 FROM sys_role_menu rm
    INNER JOIN sys_menu m ON rm.menu_id = m.menu_id
    WHERE rm.role_id = r.role_id
      AND m.perms = 'system:user:list'
);

方案 3：添加错误处理和调试信息

如果问题仍然存在，可以在前端添加更详细的错误处理：

在 permission.js 中添加错误日志
在 store/modules/user.js 的 GetInfo 中添加错误处理
在 store/modules/permission.js 的 GenerateRoutes 中添加错误处理

快速诊断命令

在浏览器控制台执行以下命令，检查当前状态：

// 检查 token
localStorage.getItem('Admin-Token') || document.cookie

// 检查用户信息
this.$store.getters.roles
this.$store.getters.permissions

// 检查路由
this.$router.options.routes

常见错误及解决方法

错误 1：`GetInfo` 返回 401

原因： Token 无效或过期 解决： 重新登录

错误 2：`getRouters` 返回 401

原因： 用户权限不足 解决： 检查并修复数据库权限配置

错误 3：路由生成失败

原因： 后端返回的菜单数据格式不正确 解决： 检查后端日志，确认菜单数据格式

错误 4：页面一直显示加载

原因： API 调用失败但没有错误处理 解决： 检查 Network 标签，查看具体的错误响应

4.3 KiB Raw Blame History Unescape Escape