# 排查计划：解决后台登录 403 错误与代码预览功能

## 1. 解决后台登录 lq 用户报错 403 的问题

用户 `lq` 登录后台遇到 403 Forbidden 错误，通常意味着认证通过（Token 有效），但**授权失败**（权限不足）。

**原因分析**：
- 我之前在 `middleware/auth.go` 中实现了 `PermissionMiddleware`，它严格检查 `role_permissions` 表中的关联。
- 我之前提供的 SQL 语句（`nl_blog.sql`）虽然包含了 `INSERT INTO role_permissions` 语句，但如果数据库没有正确执行这些插入操作，或者 `lq` 用户的 `role_id` 没有正确关联到 `admin` 角色，就会导致权限为空，从而触发 403。
- 从 `nl_blog.sql` 来看：
  - `lq` 用户的 `role_id` 是 `1` (`admin`)。
  - `roles` 表中 `admin` 的 ID 是 `1`。
  - `permissions` 表被清空重建了。
  - 关键点：`role_permissions` 表的插入语句依赖 `SELECT id FROM permissions`。如果 `permissions` 表的 ID 自增顺序不符合预期，或者数据未完全写入，可能导致关联丢失。

**执行步骤**：
1.  **检查数据库数据**：
    - 确认 `lq` 用户的 `role_id` 是否为 1。
    - 确认 `roles` 表中 ID 为 1 的是 admin。
    - **最关键**：检查 `role_permissions` 表中，`role_id = 1` 是否有对应的权限记录。我怀疑这里是空的或者不完整。
2.  **修复数据**：
    - 如果发现权限关联缺失，我将重新执行权限关联的 SQL 语句，确保 `admin` 角色拥有所有权限。
3.  **验证 Token 生成**：
    - 检查登录接口生成的 JWT Token 是否正确包含 `role_id` claim。

## 2. 解决代码预览功能未实现的问题

用户反馈代码预览功能（前端 CodePreview 组件）未实现或报错。

**原因分析**：
- 前端 `CodePreview.vue` 之前是纯前端模拟，现在我已将其连接到后端 `/api/run` 接口。
- 如果后端接口未正确响应（例如跨域、404、或内部错误），前端会报错。
- 用户提到的 "VM321:25 Uncaught SyntaxError: Failed to execute 'write' on 'Document': Cannot use import statement outside a module" 错误，我已经通过在上一步修改 `CodePreview.vue`（添加 `<script type="module">`）解决了。
- 现在的重点是确保后端 `/api/run` 接口可用，并且前端能正确展示结果。

**执行步骤**：
1.  **确认后端运行状态**：确保后端服务正在运行且没有报错。
2.  **验证 API 接口**：
    - 检查 `main.go` 中是否注册了 `/api/run` 路由。
    - 检查 `handlers_runner.go` 是否正确处理请求。
3.  **前端调试**：
    - 确认 `CodePreview.vue` 中的 `fetch` 请求地址是否正确（目前写死为 `http://localhost:8081/api/run`，如果端口不同则会失败）。需要确认后端端口配置。

## 总结计划

我将分两步走：
1.  **数据库修复**：运行 SQL 脚本修复 `role_permissions` 数据，解决 403 问题。
2.  **代码运行验证**：确认后端端口，确保前端 API 调用地址正确。

**无需修改代码**（除非端口不对），主要是**数据修复**和**验证**。