SSO 本地开发指南

本地开发注意事项

1. 清除旧的认证信息

如果之前测试过登录功能，浏览器 localStorage 中可能保存了旧的 token，导致应用认为已登录。

解决方法：

1. 打开浏览器开发者工具（F12）
2. 进入 Application/存储 → Local Storage
3. 找到对应的域名（如 http://localhost:8000）
4. 删除 auth-storage 键
5. 刷新页面

或者直接在浏览器控制台执行：

localStorage.removeItem('auth-storage')

2. 端口配置

本地开发时，各应用的端口：

• 认证门户 (apps/auth-portal): http://localhost:7777
• Web 应用 (apps/web): http://localhost:8000
• 应用模板 (apps/front-template): http://localhost:8001
• 后端服务 (apps/server): http://localhost:8787

3. 环境变量配置

开发环境已自动配置：

• VITE_AUTH_PORTAL_URL = http://localhost:7777（开发环境）
• VITE_API_URL = /api（开发环境，通过代理到 http://localhost:8787）

生产环境需要设置环境变量：

• VITE_AUTH_PORTAL_URL = 生产环境的认证门户 URL（如 https://auth.example.com）
• VITE_API_URL = 生产环境的 API URL

4. 测试流程

1. 启动所有服务：

   pnpm dev:all

2. 测试 SSO 流程：

   • 访问 http://localhost:8000/dashboard（web 应用）
   • 应该自动跳转到 http://localhost:7777?redirect=http://localhost:8000/dashboard
   • 在认证门户登录
   • 登录成功后自动跳转回 http://localhost:8000/dashboard#token=xxx
   • web 应用从 hash 中提取 token 并存储

3. 测试跨应用 SSO：

   • 在 web 应用登录后
   • 访问 http://localhost:8001/dashboard（front-template）
   • 如果 localStorage 中有 token，应该直接显示 Dashboard
   • 如果没有 token，会跳转到认证门户

5. 常见问题

Q: 为什么访问 web 应用没有跳转到认证门户？ A: 可能的原因：

• localStorage 中有旧的 token（解决方法见第 1 点）
• 访问的不是受保护的路由（如 /dashboard）
• 检查浏览器控制台是否有错误

Q: 登录后没有跳转回目标应用？ A: 检查：

• 认证门户的 redirect 参数是否正确
• 浏览器控制台是否有错误
• 网络请求是否成功

Q: Token 验证失败？ A: 检查：

• 后端服务是否正常运行（http://localhost:8787）
• Token 是否过期
• 浏览器控制台的网络请求错误

6. 调试技巧

1. 查看 localStorage：

   // 浏览器控制台
   JSON.parse(localStorage.getItem('auth-storage'))

2. 清除所有认证信息：

   // 浏览器控制台
   localStorage.removeItem('auth-storage')

3. 手动设置 token（测试用）：

   // 浏览器控制台
   localStorage.setItem('auth-storage', JSON.stringify({
     state: {
       token: 'your-token-here',
       user: null,
       isLoading: false
     },
     version: 0
   }))

4. 查看当前 URL hash：

   // 浏览器控制台
   window.location.hash