feat: 大屏
This commit is contained in:
ygx
178
IFRAME_MODE.md
Normal file
178
IFRAME_MODE.md
Normal file
@@ -0,0 +1,178 @@
|
||||
# GoView iframe 嵌入模式使用说明
|
||||
|
||||
## 概述
|
||||
|
||||
GoView 已支持通过 iframe 嵌入到其他系统中运行，无需独立的登录流程。系统会自动从 URL 参数中读取 token 进行身份验证。
|
||||
|
||||
**默认跳转**：系统启动后会直接跳转到项目列表页面 (`/project/items`)，跳过登录步骤。
|
||||
|
||||
## 使用方法
|
||||
|
||||
### 1. 基本用法
|
||||
|
||||
在 iframe 的 src 中添加 `token` 参数：
|
||||
|
||||
```html
|
||||
<!-- 默认跳转到项目列表 -->
|
||||
<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`
|
||||
|
||||
## 技术实现
|
||||
|
||||
### 修改内容
|
||||
|
||||
1. **路由守卫** (`src/router/router-guards.ts`)
|
||||
- 自动从 URL 提取 token 并保存到本地存储
|
||||
- **完全移除登录验证**：不再检查登录状态
|
||||
- **允许所有路由直接访问**：无需登录即可访问任何页面
|
||||
|
||||
2. **路由配置** (`src/router/index.ts`)
|
||||
- 默认路由修改为 `/project/items`（项目列表）
|
||||
- 跳过登录页面
|
||||
|
||||
3. **Axios 拦截器** (`src/api/axios.ts`)
|
||||
- 请求拦截器：移除重定向到登录页的逻辑
|
||||
- 响应拦截器：token 过期时不再跳转登录页
|
||||
- 所有请求自动携带 token
|
||||
|
||||
4. **应用初始化** (`src/main.ts`)
|
||||
- 应用启动时自动读取 URL 中的 token
|
||||
- 初始化用户信息到 store
|
||||
|
||||
### Token 存储
|
||||
|
||||
Token 会被自动存储到以下位置：
|
||||
- **localStorage**: 持久化存储，刷新页面后仍然有效
|
||||
- **Pinia Store**: 应用运行时状态管理
|
||||
|
||||
## 注意事项
|
||||
|
||||
### 1. Token 刷新
|
||||
|
||||
如果 token 发生变化，需要更新 iframe 的 src：
|
||||
|
||||
```javascript
|
||||
// 更新 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 参数`
|
||||
|
||||
## 示例代码
|
||||
|
||||
### 父系统嵌入示例
|
||||
|
||||
```html
|
||||
<!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 模式和独立部署模式可以共存
|
||||
- ✅ 所有原有功能均不受影响
|
||||
|
||||
## 回退到登录模式
|
||||
|
||||
如果需要回退到原有的登录模式，只需：
|
||||
1. 访问不带 token 参数的 URL
|
||||
2. 系统会提示警告但允许继续访问
|
||||
3. 或者恢复之前的代码版本
|
||||
|
||||
## 技术支持
|
||||
|
||||
如有问题，请查看：
|
||||
1. 浏览器控制台日志
|
||||
2. 网络请求中的 token 是否正确携带
|
||||
3. API 响应是否返回 token 过期错误
|
||||
Reference in New Issue
Block a user