guoyu/_已清理文件备份_周六 22512/md/页面空白问题排查.md

# 页面空白问题排查指南

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

## 问题原因分析

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

1. **API 调用失败**
   - `GetInfo` API 调用失败（401 或其他错误）
   - `getRouters` API 调用失败
   
2. **权限问题**
   - 用户没有 `system:user:list` 权限
   - 路由没有被生成

3. **路由生成失败**
   - 后端返回的菜单数据格式不正确
   - 前端路由处理逻辑出错

## 排查步骤

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

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

### 步骤 2：检查 API 请求状态

在 Network 标签中检查：

1. **`/getInfo` 请求**
   - 状态码是否为 200
   - 响应中是否包含 `roles` 和 `permissions`
   - 如果返回 401，说明 token 无效或过期

2. **`/getRouters` 请求**
   - 状态码是否为 200
   - 响应中是否包含 `/system/user` 相关的菜单数据
   - 如果返回 401，说明权限不足

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

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

```sql
-- 检查用户是否有 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：清除缓存并重新登录

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

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

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

1. 检查菜单是否存在：
```sql
SELECT menu_id, menu_name, perms 
FROM sys_menu 
WHERE perms = 'system:user:list';
```

2. 如果菜单存在，检查角色是否关联：
```sql
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';
```

3. 如果角色未关联，执行修复：
```sql
-- 为所有角色添加 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：添加错误处理和调试信息

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

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

## 快速诊断命令

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

```javascript
// 检查 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 标签，查看具体的错误响应