frontend/chart-view

Fork 0

Files

ygx 593e7d90e5 feat: 大屏

2025-12-20 17:39:32 +08:00

4.8 KiB

Raw Permalink Blame History

GoView iframe 嵌入模式使用说明

概述

GoView 已支持通过 iframe 嵌入到其他系统中运行，无需独立的登录流程。系统会自动从 URL 参数中读取 token 进行身份验证。

默认跳转：系统启动后会直接跳转到项目列表页面 (/project/items)，跳过登录步骤。

使用方法

1. 基本用法

在 iframe 的 src 中添加 token 参数：

<!-- 默认跳转到项目列表 -->
<iframe 
  src="http://your-goview-domain/#/?token=YOUR_TOKEN_HERE" 
  width="100%" 
  height="100%"
></iframe>

<!-- 或直接指定项目列表路径 -->
<iframe 
  src="http://your-goview-domain/#/project/items?token=YOUR_TOKEN_HERE" 
  width="100%" 
  height="100%"
></iframe>

2. URL 参数说明

token (必需): 用户身份认证令牌

示例：

# 默认路径，自动跳转到项目列表
http://localhost:3000/#/?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...

# 或明确指定项目列表路径
http://localhost:3000/#/project/items?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...

3. 支持的页面路由

您可以直接跳转到任何页面，只需在 URL 中添加 token 参数：

项目列表（默认）: /#/?token=YOUR_TOKEN 或 /#/project/items?token=YOUR_TOKEN
项目首页: /#/project?token=YOUR_TOKEN
图表编辑: /#/chart/home/PROJECT_ID?token=YOUR_TOKEN
图表预览: /#/chart/preview/PROJECT_ID?token=YOUR_TOKEN

技术实现

修改内容

路由守卫 (src/router/router-guards.ts)
- 自动从 URL 提取 token 并保存到本地存储
- 完全移除登录验证：不再检查登录状态
- 允许所有路由直接访问：无需登录即可访问任何页面
路由配置 (src/router/index.ts)
- 默认路由修改为 /project/items（项目列表）
- 跳过登录页面
Axios 拦截器 (src/api/axios.ts)
- 请求拦截器：移除重定向到登录页的逻辑
- 响应拦截器：token 过期时不再跳转登录页
- 所有请求自动携带 token
应用初始化 (src/main.ts)
- 应用启动时自动读取 URL 中的 token
- 初始化用户信息到 store

Token 存储

Token 会被自动存储到以下位置：

localStorage: 持久化存储，刷新页面后仍然有效
Pinia Store: 应用运行时状态管理

注意事项

1. Token 刷新

如果 token 发生变化，需要更新 iframe 的 src：

// 更新 token
const newToken = 'NEW_TOKEN_HERE'
iframe.src = `http://your-goview-domain/#/?token=${newToken}`

2. Token 过期处理

当 token 过期时：

系统会在控制台输出警告信息
用户会看到"登录过期"的提示
不会自动跳转到登录页
需要父系统更新 iframe 的 token 参数

3. 安全建议

确保 token 通过 HTTPS 传输
token 应该设置合理的过期时间
考虑使用短期 token + 刷新 token 机制

4. 跨域问题

如果 GoView 和父系统不在同一域名下，需要：

配置 CORS 允许跨域请求
确保 API 服务器允许来自父系统域名的请求

控制台日志

系统会输出以下日志帮助调试：

✅ [GoView] iframe 模式：已从 URL 参数中获取 token 并初始化
⚠️ [GoView] iframe 模式：未在 URL 中检测到 token 参数
⚠️ [GoView] iframe 模式：未找到身份信息，请确保 URL 中包含 token 参数
❌ [GoView] iframe 模式：token 已过期，请更新 URL 中的 token 参数

示例代码

父系统嵌入示例

<!DOCTYPE html>
<html>
<head>
  <title>GoView 嵌入示例</title>
</head>
<body>
  <div id="goview-container">
    <iframe 
      id="goview-iframe"
      src="" 
      width="100%" 
      height="800px"
      frameborder="0"
    ></iframe>
  </div>

  <script>
    // 从您的认证系统获取 token
    const token = 'YOUR_USER_TOKEN'
    
    // 设置 iframe src（默认跳转到项目列表）
    const iframe = document.getElementById('goview-iframe')
    iframe.src = `http://localhost:3000/#/?token=${token}`
    
    // 如果需要更新 token
    function updateToken(newToken) {
      iframe.src = `http://localhost:3000/#/?token=${newToken}`
    }
  </script>
</body>
</html>

兼容性说明

✅ 保留了原有的登录功能（如果不通过 URL 传递 token，仍可使用登录页面）
✅ iframe 模式和独立部署模式可以共存
✅ 所有原有功能均不受影响

回退到登录模式

如果需要回退到原有的登录模式，只需：

访问不带 token 参数的 URL
系统会提示警告但允许继续访问
或者恢复之前的代码版本

技术支持

如有问题，请查看：

浏览器控制台日志
网络请求中的 token 是否正确携带
API 响应是否返回 token 过期错误

4.8 KiB Raw Permalink Blame History Unescape Escape