@smart100/spu-web-plugin 1.0.25-beta.4 → 1.0.25-beta.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@smart100/spu-web-plugin",
-  "version": "1.0.25-beta.4",
+  "version": "1.0.25-beta.6",
   "description": "",
   "scripts": {
     "dev": "npm run build:types && rollup -c -w",
@@ -52,4 +52,4 @@
     "uuid": "^9.0.1",
     "vconsole": "^3.15.1"
   }
-}
+}

package/src/axios.ts

@@ -1,8 +1,9 @@
 import axios from 'axios'
 import type { AxiosInstance, AxiosResponse } from 'axios'
-import { get } from 'lodash-es'
+import { get, cloneDeep } from 'lodash-es'
 import { loadding } from './components/loadding'
 import { getToken, updateToken, getLoginState } from './login'
+import { globalOptions } from './index'
 import core from './core'
 import { urlquery } from './urlquery'
 import { getTecode } from './envService'
@@ -15,8 +16,10 @@ interface Response {
   message: string
 }
 
+type axiosType = 'spu' | 'apaas' | 'normal'
+
 // _encrydata
-export const normalizeEncryData = (response: any) => {
+const normalizeEncryData = (response: any) => {
   if (response.data && response.data._encrydata && typeof response.data._encrydata === 'string') {
     const res = decrypt(response.data._encrydata)
     try {
@@ -43,27 +46,56 @@ export const normalizeEncryData = (response: any) => {
   return response
 }
 
-const createAxiosInstance = (type: 'spu' | 'normal' = 'spu', options: any) => {
-  const axiosInstance: AxiosInstance = axios.create({
-    baseURL: type === 'spu' ? `/api/${options.modulekey}/${options.moduleversion}` : ''
-    // baseURL: '',
-    // timeout: 36000000
-    // withCredentials: true, // 不能开启 影响ali oss
-    // headers: {
-    //   // 'Content-Type': 'application/json;charset=UTF-8',
-    //   // 'app_id': '100'
-    // }
-  })
+// 检查接口错误返回信息是否登录
+const checkErrorResponseIsLogin = (type: axiosType = 'spu', err: any) => {
+  if (type === 'spu') {
+    if (err.message === '未授权' && get(err, 'response.data.code') === 401) {
+      return false
+    } else {
+      return true
+    }
+  } else if (type === 'apaas') {
+    if (
+      err.message.indexOf('token is invalid(decode).') !== -1 ||
+      err.message.indexOf('token is invalid(null).') !== -1 ||
+      err.message === 'token无效，请重新登录' ||
+      err.message === 'jwt token无效'
+    ) {
+      return false
+    } else {
+      return true
+    }
+  }
+}
+
+const createAxiosInstance = (type: axiosType = 'spu', config: any = {}) => {
+  const axiosInstance: AxiosInstance = axios.create(
+    Object.assign(config, {
+      baseURL:
+        type === 'spu' ? `/api/${globalOptions.modulekey}/${globalOptions.moduleversion}` : ''
+    })
+  )
 
   axiosInstance.interceptors.request.use(
     async (config: any) => {
-      // const isShowLoading = typeof config?.isShowLoading !== 'undefined' ? config.isShowLoading : true
-      // console.error(444444)
-      // console.log(config)
-
       const isShowLoading = get(config, 'isShowLoading', true)
       isShowLoading && loadding.open()
 
+      if (type === 'spu' && config.modulekey) {
+        const moduleData: any = await core.getModuleData(config.modulekey)
+        if (moduleData.data) {
+          config.baseURL = `/api/${config.modulekey}/${moduleData.data.moduleversion}`
+        } else {
+          console.error(moduleData.errorMsg)
+          config.baseURL = `/api/${config.modulekey}/v?.?`
+        }
+      }
+
+      // if (config.url === 'http://120.46.182.226/api/smartcenter/biz/getTenantWebAndApiDefined') {
+      //   console.log(config)
+      //   debugger
+      // }
+
       const isSendToken = get(config, 'isSendToken', true)
       if (isSendToken) {
         // 请求接口前校验是否过期 如果过期先刷新token
@@ -87,16 +119,6 @@ const createAxiosInstance = (type: 'spu' | 'normal' = 'spu', options: any) => {
         }
       }
 
-      if (type === 'spu' && config.modulekey) {
-        const moduleData: any = await core.getModuleData(config.modulekey)
-        if (moduleData.data) {
-          config.baseURL = `/api/${config.modulekey}/${moduleData.data.moduleversion}`
-        } else {
-          console.error(moduleData.errorMsg)
-          config.baseURL = `/api/${config.modulekey}/v?.?`
-        }
-      }
-
       // 平台的业务接口开了开发者模式后，header带上debug方便查看接口的ide日志
       if (type !== 'spu' && urlquery.isdebugger && config.url.indexOf('api/teapi/dy-biz/') > -1) {
         if (config?.headers) {
@@ -117,107 +139,93 @@ const createAxiosInstance = (type: 'spu' | 'normal' = 'spu', options: any) => {
       return config
     },
     (error) => {
+      // console.error(error)
+      // debugger
       return Promise.reject(error)
     }
   )
 
   axiosInstance.interceptors.response.use(
-    (res: AxiosResponse) => {
-      // debugger
+    async (res: AxiosResponse) => {
       const isShowLoading = get(res, 'config.isShowLoading', true)
       isShowLoading && loadding.close()
+
+      // if (res.config.url === '/api/auth/refreshtoken') {
+      //   console.log(res)
+      //   debugger
+      // }
+
       normalizeEncryData(res)
 
-      let realRes: Response = {
-        code: 404,
-        data: '',
-        msg: '',
-        message: ''
-      }
+      if (type !== 'normal') {
+        let realRes: Response = {
+          code: 404,
+          data: '',
+          msg: '',
+          message: ''
+        }
 
-      if (type === 'spu') {
-        if (res.data.code === 200) {
-          // return res.data
-          realRes = {
-            code: res.data.code,
-            data: res.data.data,
-            msg: res.data.msg,
-            message: res.data.msg
+        if (type === 'spu') {
+          if (res.data.code === 200) {
+            // return res.data
+            realRes = {
+              code: res.data.code,
+              data: res.data.data,
+              msg: res.data.msg,
+              message: res.data.msg
+            }
+            return realRes
+          } else {
+            realRes = {
+              code: res.data.code,
+              data: res.data.data,
+              msg: res.data.msg || '网络异常，请稍后重试。',
+              message: res.data.msg || '网络异常，请稍后重试。'
+            }
+            return Promise.reject(realRes) as any
           }
-          return realRes
-        } else {
+        } else if (type === 'apaas') {
           realRes = {
-            code: res.data.code,
-            data: res.data.data,
-            msg: res.data.msg || '网络异常，请稍后重试。',
-            message: res.data.msg || '网络异常，请稍后重试。'
+            code: res.status || 200,
+            data: res.data?.resp_data || res.data,
+            msg: res.data?.error_code || '',
+            message: res.data?.error_code || ''
           }
-
-          // const isShowErrorMessage = get(res, 'config.isShowErrorMessage', true)
-          // isShowErrorMessage && Message.error(realRes.msg)
-
-          return Promise.reject(realRes) as any
-        }
-      } else if (type === 'normal') {
-        realRes = {
-          code: res.status || 200,
-          data: res.data?.resp_data || res.data,
-          msg: res.data?.error_code || '',
-          message: res.data?.error_code || ''
+          return realRes
         }
-        return realRes
+      } else {
+        return res
       }
     },
     (err: any) => {
-      // err: AxiosError
-      // console.log(err)
-      // debugger
       const isShowLoading = get(err, 'config.isShowLoading', true)
       isShowLoading && loadding.close()
 
+      // err: AxiosError
       // console.log(err)
       // debugger
-
-      let msg = ''
-      if (type === 'spu') {
-        msg = get(err, 'response.data.msg', '')
-      } else {
-        msg = get(err, 'response.data.error_code', '')
-      }
-
-      if (msg) {
-        err.message = msg
-      } else {
-        err.message = err.response?.statusText || err.message || '网络异常，请稍后重试。'
-      }
-      err.msg = err.message
-
-      // const isShowErrorMessage = get(err, 'config.isShowErrorMessage', true)
-      // isShowErrorMessage && Message.error(msg)
-
-      const isNoLogin = () => {
+      if (type !== 'normal') {
+        let msg = ''
         if (type === 'spu') {
-          if (err.message === '未授权' && get(err, 'response.data.code') === 401) {
-            return true
-          } else {
-            return false
-          }
-        } else if (type === 'normal') {
-          if (
-            err.message.indexOf('token is invalid(decode).') !== -1 ||
-            err.message.indexOf('token is invalid(null).') !== -1 ||
-            err.message === 'token无效，请重新登录' ||
-            err.message === 'jwt token无效'
-          ) {
-            return true
-          } else {
-            return false
-          }
+          msg = get(err, 'response.data.msg', '')
+        } else if (type === 'apaas') {
+          msg = get(err, 'response.data.error_code', '')
+        } else {
         }
-      }
+        if (msg) {
+          err.message = msg
+        } else {
+          err.message = err.response?.statusText || err.message || '网络异常，请稍后重试。'
+        }
+        err.msg = err.message
 
-      const noLoginFn = () => {
-        if (isNoLogin()) {
+        // 对接口报错进行处理
+        if (!checkErrorResponseIsLogin(type, err)) {
+          // 跳登录页面
+        } else {
+          // 弹出错误提示
+          // const isShowErrorMessage = get(err, 'config.isShowErrorMessage', true)
+          // isShowErrorMessage && Message.error(err.msg)
         }
       }
 
@@ -228,12 +236,24 @@ const createAxiosInstance = (type: 'spu' | 'normal' = 'spu', options: any) => {
   return axiosInstance
 }
 
+// spuAxios: 针对spu接口的返回形式，调用接口加前缀 `/api/${config.modulekey}/${moduleData.data.moduleversion}` 状态码一直返回200，调用成功/错误基于返回的 data.code【200是成功】判断，返回数据放 data.data，错误信息放 data.msg，对返回数据进行包装，保证一致性
+// apaasAxios: 针对平台接口的返回形式，返回数据放 data.resp_data，错误信息放 data.error_code，对返回数据进行包装，保证一致性
+// normalAxios: 普通接口调用，除了必要的拦截器前置后置处理外，接口返回什么就是什么，不做包装
 let spuAxios: any = null
+let apaasAxios: any = null
 let normalAxios: any = null
 
 function installAxios(options: any) {
-  spuAxios = createAxiosInstance('spu', options)
-  normalAxios = createAxiosInstance('normal', options)
+  spuAxios = createAxiosInstance('spu')
+  apaasAxios = createAxiosInstance('apaas')
+  normalAxios = createAxiosInstance('normal')
 }
 
-export { installAxios, spuAxios, normalAxios as axios, normalizeEncryData as decryptAxiosResponseData }
+export {
+  installAxios,
+  createAxiosInstance,
+  spuAxios,
+  apaasAxios,
+  normalAxios,
+  normalizeEncryData as decryptAxiosResponseData
+}

package/src/axiosCache.ts

@@ -0,0 +1,276 @@
+import localforage from 'localforage'
+import type { AxiosRequestConfig, AxiosInstance } from 'axios'
+import { isOnline } from './utils'
+import { getUser } from './login'
+
+const store = localforage.createInstance({
+  name: 'spu-db',
+  storeName: 'axios-cache'
+})
+
+const defaultCachetime = 60 * 1000 * 60 * 24 * 7 // 默认缓存7天
+
+// 将数据转换成indexDB能够保存的格式
+// structuredClone 不支持的格式全部转成null
+// Error 类型保留
+const transform2IndexDB = (data: any, reverse = false): any => {
+  if (!reverse) {
+    if (Object.prototype.toString.call(data) === '[object Array]') {
+      return data.map(transform2IndexDB)
+    } else if (Object.prototype.toString.call(data) === '[object Object]') {
+      return Object.fromEntries(
+        new Map(
+          Object.entries(data).map((item) => {
+            return [item[0], transform2IndexDB(item[1])]
+          })
+        )
+      )
+    } else if (Object.prototype.toString.call(data) === '[object Error]') {
+      return {
+        __error__: true,
+        name: data.name,
+        message: data.message,
+        stack: data.stack,
+        // 保留其他自定义属性
+        ...Object.fromEntries(
+          Object.getOwnPropertyNames(data)
+            .filter((prop) => !['name', 'message', 'stack'].includes(prop))
+            .map((prop) => [prop, transform2IndexDB(data[prop])])
+        )
+      }
+    } else {
+      // 不支持的类型不报错 转换为null
+      try {
+        return structuredClone(data)
+        // return data
+      } catch (err) {
+        // console.error(err)
+        return null
+      }
+    }
+  } else {
+    if (Object.prototype.toString.call(data) === '[object Array]') {
+      return data.map((item: any) => {
+        return transform2IndexDB(item, true)
+      })
+    } else if (Object.prototype.toString.call(data) === '[object Object]') {
+      if (data.__error__) {
+        const error: any = new Error(data.message)
+        error.name = data.name
+        error.stack = data.stack
+
+        // 恢复其他自定义属性
+        Object.keys(data).forEach((key) => {
+          if (!['__error__', 'name', 'message', 'stack'].includes(key)) {
+            error[key] = transform2IndexDB(data[key], true)
+          }
+        })
+
+        return error
+      } else {
+        return Object.fromEntries(
+          new Map(
+            Object.entries(data).map((item) => {
+              return [item[0], transform2IndexDB(item[1], true)]
+            })
+          )
+        )
+      }
+    } else {
+      // 不支持的类型不报错 转换为null
+      try {
+        return structuredClone(data)
+        // return data
+      } catch (err) {
+        // console.error(err)
+        return null
+      }
+    }
+  }
+}
+
+// window.addEventListener('online', () => {
+//   console.log('浏览器已恢复在线')
+// })
+
+// window.addEventListener('offline', () => {
+//   console.log('浏览器已离线')
+//   console.log('当前处于离线状态，部分功能受限，恢复联网后将自动同步数据')
+// })
+
+// 生成缓存键 缓存区分租户和人员
+const generateCacheKey = (axiosRequestConfig: AxiosRequestConfig): string => {
+  const tenantcode = getUser('tenantcode') || ''
+  const mbcode = getUser('mbcode') || getUser('membercode') || ''
+  const baseURL = axiosRequestConfig?.baseURL || ''
+  const url = axiosRequestConfig?.url || ''
+  const method = axiosRequestConfig?.method || 'get'
+  const params = JSON.stringify(axiosRequestConfig?.params || {})
+  const data = JSON.stringify(axiosRequestConfig?.data || {})
+
+  return `tenantcode=${tenantcode}&mbcode=${mbcode}&baseURL=${baseURL}&url=${url}&method=${method}&params=${params}&data=${data}`
+}
+
+interface IAxiosCacheConfig {
+  // 缓存策略 cachestrategy：
+  // network-only: 不缓存：仅使用联网数据
+  // network-first: 网络优先，缓存数据后，下次请求优先使用联网数据，离线才使用缓存数据
+  // cache-first: 缓存优先，缓存数据后，下次请求优先使用缓存数据，使用缓存后如果有联网则依然请求最新数据替换旧缓存【比如剑哥需求文档中的表单协议缓存，则属于此策略】【这个策略下需第二次请求接口才能拿到最新数据】
+  // d.如果是 b c，支持配置缓存过期时间
+  strategy: 'network-only' | 'cache-first' | 'network-first'
+  cachetime?: number
+}
+
+interface IAxiosCacheData {
+  success: boolean
+  response: any
+  cachetime: number // 缓存过期时间
+  expiretime: number // 过期时间
+}
+
+const removeCache = async (cachekey: string) => {
+  await store.removeItem(cachekey)
+}
+
+const setCache = async (cachekey: string, cache: IAxiosCacheData) => {
+  await store.setItem(cachekey, transform2IndexDB(cache))
+}
+
+const getCache = async (cachekey: string) => {
+  const cacheSource: IAxiosCacheData | null = await store.getItem(cachekey)
+  const cache: IAxiosCacheData | null = transform2IndexDB(cacheSource, true)
+  let isusecache = false
+  if (cache && Date.now() <= cache.expiretime) {
+    isusecache = true
+  } else if (cache && Date.now() > cache.expiretime) {
+    isusecache = false
+    // 获取缓存时发现数据过期顺便清掉
+    await removeCache(cachekey)
+  } else {
+    isusecache = false
+  }
+  return isusecache ? cache : null
+}
+
+const cacheToAxiosResponse = async (cache: IAxiosCacheData): Promise<any> => {
+  return new Promise((resolve, reject) => {
+    if (cache.success) {
+      return resolve(cache.response)
+    } else {
+      return reject(cache.response)
+    }
+  })
+}
+
+const axiosPromiseToCache = async (
+  axiosPro: Promise<any>,
+  cachetime?: number
+): Promise<IAxiosCacheData> => {
+  return new Promise((resolve, reject) => {
+    const realCachetime = Number(cachetime || defaultCachetime)
+    let success = false
+    let response: any = null
+    axiosPro
+      .then((res: any) => {
+        success = true
+        response = res
+      })
+      .catch((err: any) => {
+        success = false
+        response = err
+      })
+      .finally(() => {
+        resolve({
+          cachetime: realCachetime,
+          expiretime: Date.now() + realCachetime,
+          success,
+          response
+        })
+      })
+  })
+}
+
+const axiosCache = async (
+  config: IAxiosCacheConfig | null,
+  axiosInstance: AxiosInstance,
+  axiosRequestConfig: AxiosRequestConfig
+) => {
+  // 检查是否启用缓存
+  const strategy = config?.strategy || 'network-only'
+  const cachekey = generateCacheKey(axiosRequestConfig)
+  if (strategy === 'network-first') {
+    const online = await isOnline()
+    if (online) {
+      const cache = await axiosPromiseToCache(axiosInstance(axiosRequestConfig), config?.cachetime)
+      setCache(cachekey, cache)
+      return cacheToAxiosResponse(cache)
+    } else {
+      const cache = await getCache(cachekey)
+      if (cache) {
+        return cacheToAxiosResponse(cache)
+      } else {
+        return new Error('no cache and offline')
+      }
+    }
+  } else if (strategy === 'cache-first') {
+    const cache = await getCache(cachekey)
+    const online = await isOnline()
+
+    const getAndSetCacheIfOnline = async (): Promise<any> => {
+      if (online) {
+        const cache = await axiosPromiseToCache(
+          axiosInstance(axiosRequestConfig),
+          config?.cachetime
+        )
+        setCache(cachekey, cache)
+        return cache
+      } else {
+        return null
+      }
+    }
+
+    if (cache) {
+      getAndSetCacheIfOnline() // 这里不等返回 是优先使用缓存 但依然在线获取最新数据
+      // debugger
+      return cacheToAxiosResponse(cache)
+    } else {
+      if (online) {
+        const cache = await getAndSetCacheIfOnline()
+        // debugger
+        return cacheToAxiosResponse(cache)
+      } else {
+        return new Error('no cache and offline')
+      }
+    }
+  } else {
+    return axiosInstance(axiosRequestConfig)
+  }
+}
+
+const removeExpireDataByCachekey = async (cachekey: string) => {
+  const cacheSource: IAxiosCacheData | null = await store.getItem(cachekey)
+  if (cacheSource && Date.now() > cacheSource.expiretime) {
+    await removeCache(cachekey)
+  }
+}
+
+// 清除过期无效数据
+const removeExpireData = async () => {
+  store
+    .keys()
+    .then(async (keys) => {
+      for (let i = 0, len = keys.length; i < len; i++) {
+        const key = keys[i]
+        await removeExpireDataByCachekey(key)
+      }
+    })
+    .catch((err) => {
+      console.log(err)
+    })
+}
+
+const installAxiosCache = () => {
+  removeExpireData()
+}
+
+export { axiosCache, installAxiosCache }

package/src/components/expandexp/index.ts

@@ -1,6 +1,6 @@
 import { Module } from '../../core'
 import { wxworkSuite } from '../../wxworksuitePlugin'
-import { spuAxios, axios } from '../../axios'
+import { spuAxios, apaasAxios } from '../../axios'
 import { getUser } from '../../login'
 import { cloneDeep, merge } from 'lodash-es'
 import { downloadService } from '../../oss'
@@ -425,7 +425,7 @@ export default class SpuExpandexp extends HTMLElement {
         event: 'exportopenmodal'
       })
     } else {
-      axios
+      apaasAxios
         .post(
           '/api/expandexp/global/searchExpGloConfig',
           {
@@ -468,7 +468,7 @@ export default class SpuExpandexp extends HTMLElement {
             this.data.iscompress = '1'
 
             // 获取文件水印开关
-            axios
+            apaasAxios
               .post('/api/expandexp/global/searchWatermarkConfig', '', {
                 isShowLoading: false
               })
@@ -539,7 +539,7 @@ export default class SpuExpandexp extends HTMLElement {
       }
     }
     const finallyPost = mergedata ? merge(mergedata, post) : post
-    axios
+    apaasAxios
       .post(this.props.exportapi, finallyPost)
       .then((res: any) => {
         // console.log(res)
@@ -662,7 +662,7 @@ export default class SpuExpandexp extends HTMLElement {
     // console.log(this.data)
     // console.log(this.data.exportDataItem)
 
-    axios
+    apaasAxios
       .post('/api/teapi/queue/impexp/cancel', {
         dynamicid: this.data.exportId
       })
@@ -708,7 +708,7 @@ export default class SpuExpandexp extends HTMLElement {
   }
 
   async updateStatus() {
-    axios
+    apaasAxios
       .post(
         `/api/teapi/queue/impexp/expStatus?dynamicid=${this.data.exportId}`,
         {},

package/src/core.js

@@ -1,5 +1,5 @@
 import { globalOptions } from './index'
-import { axios } from './axios'
+import { apaasAxios } from './axios'
 import { get, cloneDeep } from 'lodash-es'
 import { urlquery } from './urlquery'
 import { getToken, getUser, getRefreshToken, getTokenExpires } from './login'
@@ -83,7 +83,7 @@ class Core {
       // debugger
       let res
       try {
-        res = await axios.post(
+        res = await apaasAxios.post(
           `${smartcenter}/api/smartcenter/biz/getTenantWebAndApiDefined`,
           {
             envid: envId,

package/src/envService.ts

@@ -1,6 +1,6 @@
 import { get, cloneDeep } from 'lodash-es'
 import { lsProxy } from './storageProxy'
-import { axios } from './axios'
+import { apaasAxios } from './axios'
 import { decrypt } from './crypt'
 import { toggleHttpOrHttps } from './utils'
 import { getData, setData, removeData } from './storageCache'
@@ -54,7 +54,7 @@ async function requestEnvdata(envName: string): Promise<IAny | null> {
         ? 'https://mconfig.xuantongkeji.com'
         : 'http://mconfig.xuantongkeji.com:8015'
     try {
-      const res = await axios.get(`${hostsRoot}/multiplatconfig/env/${envName}`, {
+      const res = await apaasAxios.get(`${hostsRoot}/multiplatconfig/env/${envName}`, {
         isShowLoading: false,
         isSendToken: false
       })