feat:拦截me接口返回mock

Author: discreted66

package.json

@@ -46,6 +46,7 @@
   "scripts": {
     "dev": "pnpm -F tiny-pro-vue start",
     "dev:backend": "pnpm -F tinyui-nestjs-server start",
+    "dev:designer": "pnpm -F template/lowcode-designer dev",
     "describe": "npm-scripts-info",
     "build": "run-s build:*",
     "build:main": "tsc -p tsconfig.json",

template/lowcode-designer/src/composable/http/index.js

@@ -3,6 +3,7 @@ import { HttpService } from '@opentiny/tiny-engine'
 import { useBroadcastChannel } from '@vueuse/core'
 import { constants } from '@opentiny/tiny-engine-utils'
 import Login from './Login.vue'
+import mockConfig from './mockConfig'
 
 const LOGIN_EXPIRED_CODE = 401
 const { BROADCAST_CHANNEL } = constants
@@ -36,6 +37,72 @@ const preRequest = (config) => {
     config.baseURL = ''
   }
 
+  // 检查是否需要 mock - 纯前端项目，拦截 /api/user/me 接口
+  const fullUrl = (config.baseURL || '') + (config.url || '')
+  const urlToCheck = config.url || ''
+
+  // 检查是否是 /api/user/me 或 /user/me 请求
+  const isMeRequest = /\/api\/user\/me$|\/user\/me$/.test(fullUrl) ||
+    /\/api\/user\/me$|\/user\/me$/.test(urlToCheck)
+
+  if (isMeRequest && (config.method || 'GET').toUpperCase() === 'GET') {
+
+    // 找到对应的 mock 配置
+    const mockRoute = mockConfig.find((route) => {
+      const urlMatch = typeof route.url === 'string'
+        ? fullUrl.includes(route.url) || urlToCheck.includes(route.url)
+        : route.url.test(fullUrl) || route.url.test(urlToCheck)
+      const methodMatch = !route.method ||
+        route.method.toUpperCase() === (config.method || 'GET').toUpperCase()
+      return urlMatch && methodMatch
+    })
+
+    if (mockRoute) {
+      // 直接调用 mock 的 response 函数
+      const mockResult = mockRoute.response(config)
+
+      // 如果返回的是 Promise，等待 resolve
+      if (mockResult && typeof mockResult.then === 'function') {
+        return mockResult.then(([status, data]) => {
+          console.info('222222222222222222222222', data)
+          // 返回一个模拟的响应对象
+          // 注意：axios 请求拦截器返回的应该是 config，但我们可以通过返回一个特殊对象来阻止请求
+          // 实际上，我们需要修改 config，让它不会发送真实请求
+          config.adapter = () => {
+            // 返回一个 Promise，resolve 一个模拟的响应
+            return Promise.resolve({
+              data: {
+                data,
+                error: null
+              },
+              status,
+              statusText: 'OK',
+              headers: {},
+              config
+            })
+          }
+          return config
+        })
+      } else {
+        // 如果 response 不是异步的，直接处理
+        const [status, data] = mockResult
+        config.adapter = () => {
+          return Promise.resolve({
+            data: {
+              data,
+              error: null
+            },
+            status,
+            statusText: 'OK',
+            headers: {},
+            config
+          })
+        }
+        return config
+      }
+    }
+  }
+
   return config
 }
 
@@ -124,7 +191,9 @@ const customizeHttpService = () => {
     interceptors: {
       request: [preRequest],
       response: [[preResponse, errorResponse]]
-    }
+    },
+    mockConfig,
+    enableMock: true
   }
 
   HttpService.apis.setOptions(options)

template/lowcode-designer/src/composable/http/mockConfig.js

@@ -0,0 +1,46 @@
+/**
+ * Mock 路由配置
+ * 用于纯前端项目的接口 mock
+ */
+
+// Mock 用户数据（真实接口返回格式）
+const mockUserData = {
+  data: {
+    id: 1,
+    username: '开发者',
+    email: 'developer@lowcode.com',
+    provider: null,
+    password: null,
+    confirmationToken: 'uuid~dfafasdfasdfa',
+    confirmed: true,
+    blocked: false,
+    created_by: null,
+    updated_by: null,
+    created_at: '2021-11-11T13:52:21.000Z',
+    updated_at: '2022-11-01T01:39:30.000Z',
+    block: false,
+    is_admin: true,
+    is_public: false,
+  },
+  locale: 'zh-cn',
+};
+
+// 格式化响应数据
+const getResponseData = (data) => {
+  return {
+    data,
+    error: null,
+  };
+};
+
+export default [
+  // 获取用户信息
+  {
+    url: /\/api\/user\/me$|\/user\/me$/, // 使用正则表达式匹配
+    method: 'GET',
+    response: async () => {
+      console.log('[Lowcode Designer] Mock /api/user/me 接口，返回 mock 数据');
+      return [200, getResponseData(mockUserData)];
+    },
+  },
+];