重构: video 模块走芋道网关统一鉴权，移除独立 WVP JWT 客户端

- api/video/request.ts: 删除自实现的 WVP access-token 登录/缓存/401 续期逻辑，直接 re-export requestClient（yudao Authorization: Bearer）， wvpRequestClient 名字仅作过渡期别名，TODO 标记后续统一重命名。 - api/video/device/index.ts: 路径从 /video/device/{proxy,user,server,...} 迁移到后端 @RequestMapping 对齐的 /video/{proxy,ai/*,server/media_server}；删除 getAlertImageUrl（老 WVP 时代产物），删除截图 URL 里的 ?access-token。 - api/video/edge/index.ts: /video/device/device/* -> /video/ai/device/*（对齐 AiEdgeDeviceController）。 - views/video/device/camera: HEAD 探活 URL 同步，补注释说明后端需对 /video/ai/roi/snap/image permitAll 或依赖 session cookie。 - vite.config: 删除 /admin-api/video/device/* 按子路径 rewrite 到 WVP:18080 的规则，统一走 /admin-api 到芋道网关 48080；去掉 VITE_WVP_USERNAME/PASSWORD_MD5 依赖（安全改进：凭据不再打进客户端 bundle）。 Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-04-23 19:33:37 +08:00
parent 680c965a27
commit 2a7fec30a9
5 changed files with 68 additions and 216 deletions
--- a/apps/web-antd/src/api/video/device/index.ts
+++ b/apps/web-antd/src/api/video/device/index.ts
@@ -1,16 +1,18 @@
 /**
 * Video 模块 - 设备管理 API
 *
- * 所有请求通过 wvpRequestClient 发送到 WVP 视频平台后端，
- * 由 Vite 代理按路径分发并 rewrite：
- *   /video/device/proxy/*  → WVP /api/proxy/*
- *   /video/device/user/*   → WVP /api/user/*
- *   /video/device/server/* → WVP /api/server/media_server/*
- *   /video/device/*        → WVP /api/ai/*
+ * 请求走统一的 requestClient（yudao 框架鉴权：Authorization: Bearer）。
+ * video 微服务已接入 gateway，路径对齐后端 @RequestMapping：
+ *   /video/proxy/*       拉流代理（StreamProxyController）
+ *   /video/server/*      媒体服务器（ServerController）
+ *   /video/ai/camera/*   摄像头
+ *   /video/ai/roi/*      ROI 及算法绑定
+ *   /video/ai/algorithm/* 算法
+ *   /video/ai/config/*   配置推送
 */
 import { useAppConfig } from '@vben/hooks';

-import { getWvpToken, wvpRequestClient } from '#/api/video/request';
+import { wvpRequestClient } from '#/api/video/request';

 const { apiURL } = useAppConfig(import.meta.env, import.meta.env.PROD);

@@ -106,19 +108,19 @@ export function getCameraList(params: {
  pulling?: boolean;
 }) {
  return wvpRequestClient.get<VideoDeviceApi.PageResult<VideoDeviceApi.Camera>>(
-    '/video/device/proxy/list',
+    '/video/proxy/list',
    { params },
  );
 }

 /** 新增摄像头 */
 export function addCamera(data: Partial<VideoDeviceApi.Camera>) {
-  return wvpRequestClient.post('/video/device/proxy/add', data);
+  return wvpRequestClient.post('/video/proxy/add', data);
 }

 /** 编辑摄像头 */
 export function updateCamera(data: Partial<VideoDeviceApi.Camera>) {
-  return wvpRequestClient.post('/video/device/proxy/update', data);
+  return wvpRequestClient.post('/video/proxy/update', data);
 }

 /** 保存摄像头（新增/编辑，有 id 为编辑） */
@@ -128,25 +130,25 @@ export function saveCamera(data: Partial<VideoDeviceApi.Camera>) {

 /** 删除摄像头 */
 export function deleteCamera(id: number) {
-  return wvpRequestClient.delete('/video/device/proxy/delete', {
+  return wvpRequestClient.delete('/video/proxy/delete', {
    params: { id },
  });
 }

 /** 开始拉流 */
 export function startCamera(id: number) {
-  return wvpRequestClient.get('/video/device/proxy/start', { params: { id } });
+  return wvpRequestClient.get('/video/proxy/start', { params: { id } });
 }

 /** 停止拉流 */
 export function stopCamera(id: number) {
-  return wvpRequestClient.get('/video/device/proxy/stop', { params: { id } });
+  return wvpRequestClient.get('/video/proxy/stop', { params: { id } });
 }

 /** 在线媒体服务器列表 */
 export function getMediaServerList() {
  return wvpRequestClient.get<VideoDeviceApi.MediaServer[]>(
-    '/video/device/server/online/list',
+    '/video/server/media_server/online/list',
  );
 }

@@ -154,7 +156,7 @@ export function getMediaServerList() {
 export function getCameraOptions() {
  return wvpRequestClient.get<
    { cameraCode: string; cameraName: string }[]
-  >('/video/device/camera/options');
+  >('/video/ai/camera/options');
 }

 // ==================== ROI 区域管理 ====================
@@ -168,68 +170,71 @@ export function getRoiList(params: {
  query?: string;
 }) {
  return wvpRequestClient.get<VideoDeviceApi.PageResult<VideoDeviceApi.Roi>>(
-    '/video/device/roi/list',
+    '/video/ai/roi/list',
    { params },
  );
 }

 /** ROI 详情（含算法绑定） */
 export function getRoiDetail(id: number) {
-  return wvpRequestClient.get<VideoDeviceApi.Roi>(`/video/device/roi/${id}`);
+  return wvpRequestClient.get<VideoDeviceApi.Roi>(`/video/ai/roi/${id}`);
 }

 /** 某摄像头的所有 ROI */
 export function getRoiByCameraId(cameraId: string) {
  return wvpRequestClient.get<VideoDeviceApi.Roi[]>(
-    '/video/device/roi/channel',
+    '/video/ai/roi/channel',
    { params: { cameraId } },
  );
 }

 /** 保存 ROI（新增/编辑） */
 export function saveRoi(data: Partial<VideoDeviceApi.Roi>) {
-  return wvpRequestClient.post('/video/device/roi/save', data);
+  return wvpRequestClient.post('/video/ai/roi/save', data);
 }

 /** 删除 ROI */
 export function deleteRoi(roiId: string) {
-  return wvpRequestClient.delete(`/video/device/roi/delete/${roiId}`);
+  return wvpRequestClient.delete(`/video/ai/roi/delete/${roiId}`);
 }

 /**
 * 获取摄像头截图 URL
 *
- * 非 force 模式：直接返回 /snap/image 代理 URL（无时间戳，浏览器自动缓存）
- * force 模式：先触发边缘端截图，再返回带时间戳的代理 URL 破缓存
+ * 非 force：返回代理 URL，浏览器按 URL 缓存。
+ * force：先触发边缘端截图，再返回加时间戳的代理 URL 破缓存。
+ *
+ * 图片鉴权假设（重要）：
+ * - 老 WVP 的 ?access-token=xxx 已移除。
+ * - 返回的 URL 会被 <img src> 使用，浏览器不会带上 Authorization 头；
+ *   该端点必须在后端满足以下任一条件之一才能正常显示：
+ *     (a) SecurityConfig 里对 /video/ai/roi/snap/image 放行（permitAll）；
+ *     (b) 依赖 yudao session cookie（非 JWT）做鉴权；
+ *     (c) 后端返回预签名的 OSS URL 并由调用方改造成 302 重定向。
+ * - 任何 401/403 不会在这里抛出，调用方需要处理 <img onerror> 以显示占位图。
 */
 export async function getSnapUrl(cameraCode: string, force = false): Promise<string> {
-  const token = await getWvpToken();
  if (force) {
    // 强制刷新：先触发边缘端截图（等待完成）
    try {
-      await wvpRequestClient.get('/video/device/roi/snap', {
+      await wvpRequestClient.get('/video/ai/roi/snap', {
        params: { cameraCode, force: true },
      });
    } catch (err) {
-      // 截图请求可能超时，但 COS 上可能已有图片，继续返回代理 URL
-      // 留一条日志便于图片加载 401/404 时回溯根因
+      // 截图请求可能超时，但 OSS 上可能已有图片，继续返回代理 URL
      if (import.meta.env.DEV) {
-        console.debug('[WVP] force snap 触发失败，继续返回已有代理 URL', err);
+        console.debug('[video] force snap 触发失败，继续返回已有代理 URL', err);
      }
    }
-    // 加时间戳破浏览器缓存
    return (
-      `${apiURL}/video/device/roi/snap/image` +
+      `${apiURL}/video/ai/roi/snap/image` +
      `?cameraCode=${encodeURIComponent(cameraCode)}` +
-      `&access-token=${encodeURIComponent(token)}` +
      `&t=${Date.now()}`
    );
  }
-  // 非 force：使用代理端点，不加时间戳，浏览器自动缓存
  return (
-    `${apiURL}/video/device/roi/snap/image` +
-    `?cameraCode=${encodeURIComponent(cameraCode)}` +
-    `&access-token=${encodeURIComponent(token)}`
+    `${apiURL}/video/ai/roi/snap/image` +
+    `?cameraCode=${encodeURIComponent(cameraCode)}`
  );
 }

@@ -238,7 +243,7 @@ export async function getSnapUrl(cameraCode: string, force = false): Promise<str
 /** 算法列表 */
 export function getAlgorithmList(deviceId?: string) {
  return wvpRequestClient.get<VideoDeviceApi.Algorithm[]>(
-    '/video/device/algorithm/list',
+    '/video/ai/algorithm/list',
    { params: deviceId ? { deviceId } : {} },
  );
 }
@@ -246,7 +251,7 @@ export function getAlgorithmList(deviceId?: string) {
 /** 保存算法全局参数 */
 export function saveAlgoGlobalParams(algoCode: string, globalParams: string) {
  return wvpRequestClient.post(
-    `/video/device/algorithm/global-params/${algoCode}`,
+    `/video/ai/algorithm/global-params/${algoCode}`,
    { globalParams },
  );
 }
@@ -254,7 +259,7 @@ export function saveAlgoGlobalParams(algoCode: string, globalParams: string) {
 /** 批量更新设备算法参数 */
 export function updateDeviceAlgoParams(deviceId: string, algoCode: string, params: string) {
  return wvpRequestClient.post(
-    `/video/device/algorithm/device-binds/${deviceId}/${algoCode}`,
+    `/video/ai/algorithm/device-binds/${deviceId}/${algoCode}`,
    { params },
  );
 }
@@ -263,12 +268,12 @@ export function updateDeviceAlgoParams(deviceId: string, algoCode: string, param

 /** 绑定算法到 ROI */
 export function bindAlgo(data: { roiId: string; algoCode: string }) {
-  return wvpRequestClient.post('/video/device/roi/bindAlgo', data);
+  return wvpRequestClient.post('/video/ai/roi/bindAlgo', data);
 }

 /** 解绑算法 */
 export function unbindAlgo(bindId: string) {
-  return wvpRequestClient.delete('/video/device/roi/unbindAlgo', {
+  return wvpRequestClient.delete('/video/ai/roi/unbindAlgo', {
    params: { bindId },
  });
 }
@@ -279,14 +284,14 @@ export function updateAlgoParams(data: {
  params?: string;
  enabled?: number;
 }) {
-  return wvpRequestClient.post('/video/device/roi/updateAlgoParams', data);
+  return wvpRequestClient.post('/video/ai/roi/updateAlgoParams', data);
 }

 // ==================== 配置推送 ====================

 /** 推送配置到边缘端 */
 export function pushConfig(cameraId: string) {
-  return wvpRequestClient.post('/video/device/config/push', null, {
+  return wvpRequestClient.post('/video/ai/config/push', null, {
    params: { cameraId },
  });
 }
@@ -294,30 +299,15 @@ export function pushConfig(cameraId: string) {
 /** 一次性推送全部配置到本地Edge */
 export function pushAllConfig() {
  return wvpRequestClient.post<Record<string, any>>(
-    '/video/device/config/push-all',
+    '/video/ai/config/push-all',
  );
 }

 /** 导出摄像头配置 JSON */
 export function exportConfig(cameraId: string) {
  return wvpRequestClient.get<Record<string, any>>(
-    '/video/device/config/export',
+    '/video/ai/config/export',
    { params: { cameraId } },
  );
 }

-// ==================== 告警图片代理 ====================
-
-/**
- * 构造告警图片代理 URL（通过 WVP 下载 COS 图片后返回字节流）
- * @param imagePath COS 对象路径或完整 URL
- */
-export async function getAlertImageUrl(imagePath: string): Promise<string> {
-  if (!imagePath) return '';
-  const token = await getWvpToken();
-  return (
-    `${apiURL}/video/device/alert/image` +
-    `?imagePath=${encodeURIComponent(imagePath)}` +
-    `&access-token=${encodeURIComponent(token)}`
-  );
-}
--- a/apps/web-antd/src/api/video/edge/index.ts
+++ b/apps/web-antd/src/api/video/edge/index.ts
@@ -31,27 +31,26 @@ export namespace VideoEdgeApi {
 }

 // ==================== 边缘设备 API ====================
-// 数据源：WVP 数据库 wvp_ai_edge_device 表
-// 路径经 vite proxy: /admin-api/video/device/* → rewrite → /api/ai/* → WVP:18080
+// 对应后端 AiEdgeDeviceController @RequestMapping("/video/ai/device")

 /** 获取全部边缘设备列表 */
 export function getDeviceList() {
  return wvpRequestClient.get<VideoEdgeApi.Device[]>(
-    '/video/device/device/list',
+    '/video/ai/device/list',
  );
 }

 /** 分页查询边缘设备列表 */
 export function getDevicePage(params: PageParam) {
  return wvpRequestClient.get<PageResult<VideoEdgeApi.Device>>(
-    '/video/device/device/page',
+    '/video/ai/device/page',
    { params },
  );
 }

 /** 获取设备详情 */
 export function getDevice(deviceId: string) {
-  return wvpRequestClient.get<VideoEdgeApi.Device>('/video/device/device/get', {
+  return wvpRequestClient.get<VideoEdgeApi.Device>('/video/ai/device/get', {
    params: { deviceId },
  });
 }
@@ -59,6 +58,6 @@ export function getDevice(deviceId: string) {
 /** 获取设备统计 */
 export function getDeviceStatistics() {
  return wvpRequestClient.get<VideoEdgeApi.DeviceStatistics>(
-    '/video/device/device/statistics',
+    '/video/ai/device/statistics',
  );
 }
--- a/apps/web-antd/src/api/video/request.ts
+++ b/apps/web-antd/src/api/video/request.ts
@@ -1,118 +1,12 @@
 /**
- * WVP 视频平台专用请求客户端
+ * Video 模块请求客户端
 *
- * WVP 使用独立的 JWT 认证系统（access-token 头），
- * 与芋道前端的 Authorization Bearer 认证不同。
- * 本模块实现自动登录 WVP、缓存 token、401 自动续期。
- */
-import { useAppConfig } from '@vben/hooks';
-import { preferences } from '@vben/preferences';
-import { RequestClient } from '@vben/request';
-
-const { apiURL } = useAppConfig(import.meta.env, import.meta.env.PROD);
-
-// ==================== WVP Token 管理 ====================
-
-/**
- * WVP 默认账号
+ * 历史：原 WVP 独立服务有自己的 JWT + access-token 认证；
+ * 已迁移到 viewsh-module-video 微服务下，走框架统一鉴权
+ * （yudao Authorization: Bearer，由 #/api/request 的拦截器统一注入）。
 *
- * 注意：前端任何 WVP 账号/密码都会打进 bundle，对懂行的人等于明文。
- * 长期方案应由后端代理 WVP 鉴权，不要把账号分发到客户端。
- * 作为过渡，至少走环境变量让生产可覆盖。
+ * TODO(video-rename): 这是过渡期的命名别名。后续把 `#/api/video/**` 下所有
+ * `wvpRequestClient` 的调用点改为直接 import `requestClient`，然后删掉本文件。
+ * 保留只是为了降低此次迁移的一次性改动量。
 */
-const WVP_USERNAME = import.meta.env.VITE_WVP_USERNAME || 'admin';
-const WVP_PASSWORD_MD5 =
-  import.meta.env.VITE_WVP_PASSWORD_MD5 ||
-  '21232f297a57a5a743894a0e4a801fc3'; // 'admin' 的 MD5，仅作兜底
-
-let wvpAccessToken: null | string = null;
-let tokenPromise: null | Promise<string> = null;
-
-/** 登录 WVP 获取 access-token */
-async function loginToWvp(): Promise<string> {
-  const url =
-    `${apiURL}/video/device/user/login` +
-    `?username=${encodeURIComponent(WVP_USERNAME)}` +
-    `&password=${encodeURIComponent(WVP_PASSWORD_MD5)}`;
-
-  const res = await fetch(url);
-  const json = await res.json();
-
-  if (json.code !== 0 || !json.data?.accessToken) {
-    throw new Error(json.msg || 'WVP 登录失败');
-  }
-
-  wvpAccessToken = json.data.accessToken;
-  return wvpAccessToken!;
-}
-
-/** 获取有效的 WVP token（自动登录，防止并发重复登录） */
-export async function getWvpToken(): Promise<string> {
-  if (wvpAccessToken) {
-    return wvpAccessToken;
-  }
-  if (!tokenPromise) {
-    tokenPromise = loginToWvp().finally(() => {
-      tokenPromise = null;
-    });
-  }
-  return tokenPromise;
-}
-
-/** 清除缓存的 token（用于 401 后重新登录） */
-function clearWvpToken() {
-  wvpAccessToken = null;
-}
-
-// ==================== 请求客户端 ====================
-
-function createWvpRequestClient(baseURL: string) {
-  const client = new RequestClient({ baseURL });
-
-  // 请求拦截器：注入 WVP access-token
-  client.addRequestInterceptor({
-    fulfilled: async (config) => {
-      const token = await getWvpToken();
-      config.headers['access-token'] = token;
-      config.headers['Accept-Language'] = preferences.app.locale;
-      return config;
-    },
-  });
-
-  // 响应拦截器：处理 WVP 响应格式 + 401 自动续期
-  client.addResponseInterceptor({
-    fulfilled: (response) => {
-      const data = response.data;
-
-      // WVP 标准格式 { code: 0, msg: "成功", data: ... }
-      if (data && typeof data === 'object' && 'code' in data) {
-        if (data.code === 0) {
-          return data.data;
-        }
-        return Promise.reject(new Error(data.msg || '请求失败'));
-      }
-
-      // 非标准格式直接返回
-      return data;
-    },
-    rejected: async (error) => {
-      // 401 → 清除 token 并重试一次
-      if (error?.response?.status === 401 && error.config) {
-        clearWvpToken();
-        try {
-          const token = await getWvpToken();
-          error.config.headers['access-token'] = token;
-          const response = await client.instance.request(error.config);
-          return response;
-        } catch {
-          return Promise.reject(new Error('WVP 认证失败，请检查服务状态'));
-        }
-      }
-      return Promise.reject(error);
-    },
-  });
-
-  return client;
-}
-
-export const wvpRequestClient = createWvpRequestClient(apiURL);
+export { requestClient as wvpRequestClient } from '#/api/request';
--- a/apps/web-antd/src/views/video/device/camera/index.vue
+++ b/apps/web-antd/src/views/video/device/camera/index.vue
@@ -146,9 +146,12 @@ async function loadCameraStatus() {
  for (const cam of cameraList.value) {
    const cameraCode = cam.cameraCode;
    if (!cameraCode) continue;
-    // 使用 fetch HEAD 请求检测截图是否可用（/snap/image 已免认证）
+    // 通过 HEAD 探测截图是否可用。
+    // 前置条件：后端对 /video/ai/roi/snap/image 放行（SecurityConfig permitAll）
+    // 或依赖 session cookie —— fetch 默认不会带 Authorization 头。
+    // 401/403 会被视作"离线"，与 4xx/5xx 行为一致，对端上逻辑透明。
    try {
-      const url = `${apiURL}/video/device/roi/snap/image?cameraCode=${encodeURIComponent(cameraCode)}`;
+      const url = `${apiURL}/video/ai/roi/snap/image?cameraCode=${encodeURIComponent(cameraCode)}`;
      const res = await fetch(url, { method: 'HEAD' });
      cameraStatus.value = { ...cameraStatus.value, [cameraCode]: res.ok };
    } catch {
--- a/apps/web-antd/vite.config.mts
+++ b/apps/web-antd/vite.config.mts
@@ -34,43 +34,9 @@ export default defineConfig(async () => {
            target: 'http://127.0.0.1:8000',
          },

-          // video/device/* -> WVP :18080（按子路径分别 rewrite）
-          // 注意：更具体的路径必须写在通配路径前面
-
-          // 摄像头拉流代理: /admin-api/video/device/proxy -> /api/proxy
-          '/admin-api/video/device/proxy': {
-            changeOrigin: true,
-            target: 'http://127.0.0.1:18080',
-            rewrite: (path: string) =>
-              path.replace('/admin-api/video/device/proxy', '/api/proxy'),
-          },
-          // WVP 用户认证: /admin-api/video/device/user -> /api/user
-          '/admin-api/video/device/user': {
-            changeOrigin: true,
-            target: 'http://127.0.0.1:18080',
-            rewrite: (path: string) =>
-              path.replace('/admin-api/video/device/user', '/api/user'),
-          },
-          // 媒体服务器: /admin-api/video/device/server -> /api/server/media_server
-          '/admin-api/video/device/server': {
-            changeOrigin: true,
-            target: 'http://127.0.0.1:18080',
-            rewrite: (path: string) =>
-              path.replace(
-                '/admin-api/video/device/server',
-                '/api/server/media_server',
-              ),
-          },
-          // ROI/算法/配置等: /admin-api/video/device -> /api/ai（通配，放最后）
-          '/admin-api/video/device': {
-            changeOrigin: true,
-            target: 'http://127.0.0.1:18080',
-            rewrite: (path: string) =>
-              path.replace('/admin-api/video/device', '/api/ai'),
-          },
-
          // ==================== 芋道主平台 ====================
-          // 所有 system/*、infra/* 等基础接口 -> 芋道后端 48080
+          // 所有 system/*、infra/*、video/device/* 等业务接口 -> 芋道网关 48080
+          // video 微服务已挂到 gateway，不再直连 WVP :18080
          '/admin-api': {
            changeOrigin: true,
            rewrite: (path) => path.replace(/^\/admin-api/, ''),