158 lines
4.3 KiB
Markdown
158 lines
4.3 KiB
Markdown
# 页面空白问题排查指南
|
||
|
||
## 问题现象
|
||
访问 `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 标签，查看具体的错误响应
|
||
|