179 lines
4.8 KiB
Markdown
179 lines
4.8 KiB
Markdown
# 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 过期错误
|