@engage/frontend 是为了让接入 engage 平台的前端最大程度的使用 engage 已有的组件、函数、数据而提供的一个库。该库对外提供的公共能力有:

  1. 通用依赖,如 vue 、vuex 等
  2. 公共函数,如页面/api权限判断、微服务注册等
  3. 公共数据,如登录用户信息,用户 token 等
  4. Engage 组件库组件

# 通用依赖

vuevue-routervuexmomentvue-i18n@gs-ui/gs-ui(国双组件库) 、engage/lodash(封装了 lodash 库的 isEqual, pick, pickBy, omit, merge, cloneDeep, defaults, union, flattenDeep, chunk, debounce 方法)

# 公共函数

# getChineseStrLen

功能:计算中文字符长度,1 个中文字符长度算 1 ,1 个英文字符长度算 0.5
输入: string ,待计算长度字符串
输出:number ,输入字符串长度
使用:

import { getChineseStrLen } from '@engage/frontend';
getChineseStrLen('1234'); // 输出 2

# createMfeApp

功能:创建微服务,所有接入 engage 平台的前端微服务必须调用
输入:

{
  elId = 'mfe-app', // string ,App.vue 文件中顶层元素的 id
  component, // vue 实例
  router, // 微服务路由,createRouter 方法的输出
  store, // vuex 实例
  i18nMessages // 多语资源,对象
}

输出:

{
  // 不需关注返回,这两个函数供平台调用
  mount, // 函数,微服务挂载方法
  unmount // 函数,微服务卸载方法
}

使用:

import App from '@/App.vue';
import router from '@/router';
import { createMfeApp } from '@engage/frontend';
import i18nMessages from './i18n';
// 创建微前端
createMfeApp({
  component: App, router, i18nMessages,
});

# loadMfeApp

功能:加载某个微服务的前端资源
输入:string ,微服务名称
输出:Promise
使用:

import { loadMfeApp } from '@engage/frontend';
await loadMfeApp('mfe-app'); // 加载微前端 mfe-app 

# createRouter

功能:在 engage 平台加入微服务的路由
输入:

{
  base, // string ,路由前缀,不传递默认为 /platform/
  routes, // Array<object>,具体配置参见 https://router.vuejs.org/zh/api/#%E8%B7%AF%E7%94%B1%E5%AF%B9%E8%B1%A1%E5%B1%9E%E6%80%A7
}

使用:

import { createRouter } from '@engage/frontend';
import detail from '@/component/detail';

export default createRouter({
  routes: [
    {
      path: '/demo/detail',
      name: 'demo-detail',
      component: detail,
      meta: {
        authCode: 'demo',
      },
    },
  ],
});

# createXhr

功能:创建发送请求对象,是对 createRequestApi 方法的封装,内部使用 createRequestApi
输入:

{ apiUrlPrefix = '' } // url 前缀

输出:

{
  get, // 方法,入参为 url, params(body 数据), options 参见 createRequestApi 的options 配置及 notHandleError
  post // 同 get 方法
}

使用:

import {createXhr } from '@engage/frontend';
const xhr = createXhr({ apiUrlPrefix: 'http://test.com/wechat' });
xhr.post('/v1/content/query', { name: 'test' }, { credentials: 'include' }, notHandleError: true)

# createRequestApi

功能:发送 POST 请求,支持文件上传等 FormData 类型请求及 JSON 类请求。发送请求时在 headers 中加入 Engage-User-Token (用户 token ,用户后端对用户做权限校验),对返回结果进行处理,如解析为对象、对返回错误的接口抛出异常等。
输入:

{ apiUrlPrefix = '' } // url 前缀,最终 url 为 apiUrlPrefix + url
{
  url, // 请求 url
  body, // 请求 body
  notHandleError, // boolean,是否处理 handle 异常,如果处理,401错误会跳转到登录页,器他错误会显示在页面
  options // json 请求配置参考 https://github.com/github/fetch, formData 请求为{ progress // 上传文件进度处理函数}
}

输出:请求结果,JSON 对象
使用:

import { createRequestApi } from '@engage/frontend';
await createRequestApi(
  { apiUrlPrefix: 'http://test.com/wechat' },
  {
    url: '/v1/content/query',
  },
);

# getSupportDataScopes

功能:获取当前用户对某个 api 可访问的数据范围
输入:

{
  appId, // string ,应用id
  api, // string ,api 的 url
  dataScopes // Array<string> ,取值参考公共数据中的 DATA_SCOPE_MAP 的 key 值
}

输出:返回有权限的数据范围,字符串数组类型 ,取值参考 DATA_SCOPE_MAP 的 key 值 使用:

import { getSupportDataScopes } from '@engage/frontend';
getSupportDataScopes({ appId: 'mfe-wechat', api: '/v1/test/add' });
// 返回形式['organization-and-sub','profile']

# canAccessApi

当前用户对某个 api 是否有权限访问,使用参考detail

# canAccessPage

当前用户对某个页面是否有权限访问,使用参考detail

# queryAppAddons

功能:获取当前登录用户指定应用及插件类型的插件
输入:

{
  applicationId, // string ,插槽应用 id
  type // string ,插糟标识
}

输出:对象数组类型,

[
  {
    applicationId, // 插件应用id
    params // 对象,插件配置相关信息
  }
]

使用:

import { queryAppAddons } from '@engage/frontend';
queryAppAddons({ applicationId: 'mfe-wechat', type: 'common-step' }); 

# 公共数据

# DATA_SCOPE_MAP ,查询数据范围列举

{
  profile: '全部',
  'organization-and-sub': '我部门的',
  'position-and-sub': '我团队的',
  'position-current': '我的',
  personal: '我的',
}

# estore ,共享数据

{
    loginUserInfo: {}, // 登录用户信息
    language: 'zh-CN', // 页面语言
    userToken: null, // 用户token
    mfeApps: {
      'platform-mfe': {}
    }, // 微前端集合
  }

# i18n

提供 engage 平台的多语实例,VueI18n 实例类型

# 前端组件

详见Engage 组件库