@engage/frontend 是为了让接入 engage 平台的前端最大程度的使用 engage 已有的组件、函数、数据而提供的一个库。该库对外提供的公共能力有:
- 通用依赖,如 vue 、vuex 等
- 公共函数,如页面/api权限判断、微服务注册等
- 公共数据,如登录用户信息,用户 token 等
- Engage 组件库组件
# 通用依赖
vue 、vue-router 、vuex 、moment、 vue-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 实例类型