nl-blogs/.trae/documents/排查与修复：403 权限问题与代码预览功能.md

排查计划：解决后台登录 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 调用地址正确。

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