应用框架前端 SDK

Installation

前端 SDK 发布于 npm，安装方式如下：

npm install enos-portalsdk --save

API

框架本身提供 API，供内部 App 调用，主要用于用户信息获取和页面操作等。

接口方法统一挂在 portalSdk 下，需要先引入 sdk 模块。

import portalSdk from 'enos-portalsdk';

API List

1. getUserInfo

获取当前登录的用户信息

调用示例

portalSdk.getUserInfo()

返回示例

{
  userId: xxx,
  name: xxx
  ...
}

2. getAppInfo

获取当前 App 信息

调用示例

portalSdk.getAppInfo()

返回示例

{
  appId: xxx,
  appName: xxx
  menuId: xxx,
  mainUrl: xxx
  ...
}

3. logout

用户登出

调用示例

portalSdk.logout()

4. getLocale

获取用户当前设置的 Locale

调用示例

portalSdk.getLocale()

返回示例

en-US

5. getTheme

获取用户当前设置的主题 Key

调用示例

portalSdk.getTheme()

返回示例

theme-light

6. setPageTitle

设置页面标题

参数

| Property | Description | Type | Default | | -------- | ----------- | ------ | ------- | | title | 页面标题 | string | |

调用示例

portalSdk.setPageTitle('Custom Title')

7. setHeaderTitle

设置框架顶部标题区自定义内容

参数

| Property | Description | Type | Default | | -------- | -------------- | ------------------- | ------- | | title | 自定义区域内容 | string / React Node | |

调用示例

portalSdk.setHeaderTitle('Custom Header')

8. switchPage

切换页面 | Property | Description | Type | Default | | - | - | - | - | | mainUrl | 跳转目标主 url | string | | | subUrl | 跳转目标子 url (如主 url 再嵌套了 iframe，子 url 可作为该子 iframe 的目标地址传递) | string | | | appId | 跳转目标的 App Id | string | | | menuId | 跳转目标的 Menu Id | string | | | data | 页面之间的传参 | string | | | routeFunc | 自定义跳转方法，框架只负责更新url地址 | function | |

调用示例

portalSdk.switchPage('/admin/admin.html', '/admin/app.html', 'app1', 'menu1', { id: 123 })

9. getPermissions

获取用户在当前 App 下拥有的权限

调用示例

portalSdk.getPermissions()

返回示例

[
  {
    "permissionId": 1,
    "elementId": "app_user_admin_menu_company",
    "permissionName": "app_user_admin_menu_company",
    "permissionType": 0,
    ...
  },
  {
    "permissionId": 2,
    "elementId": "app_user_admin_menu_ouadmin",
    "permissionName": "app_user_admin_menu_ouadmin",
    "permissionType": 0,
    ...
  }
]

10. checkPermission

校验页面权限，一般不需要 App 主动调用。 如 App 本身内部再嵌套了 iframe，需要在被嵌套的内容页调用此方法，激活权限校验。

调用示例

portalSdk.checkPermission()

Permissions

1. Menu

在 App 管理模块新增类型为Menu的权限，并为指定用户分配对应的 App 和权限，用户登录后，通过 APIgetPermissions可获取到其拥有的全部权限，其中包含了配置的Menu权限。

SDK 提供了 React 版本的Menu组件，通过输入菜单数据和当前用户权限，提供统一的菜单展示。App 开发者可使用Menu组件展示菜单，也可根据权限数据自定义展示。

Menu 组件的参数

| Property | Description | Type | Default | | ------------ | ------------------------------ | -------- | ------- | | menus | 菜单数据全集，具体格式参考下文 | array | | | permissions | 当前用户拥有的权限 | array | | | onSelectMenu | Menu 选中的回调 | function | | | theme | 当前主题 Key | string | |

Menu 组件的使用示例

import portalSdk from 'enos-portalsdk';
import Menu from 'enos-portalsdk/lib/Menu';

class Demo extends React.Component {
	render() {
		return (
		  <Menu
			  menus={customMenu}
			  permissions={portalSdk.getPermissions()}
			  onSelectMenu={this.onSelectMenu}
			  theme={portalSdk.getTheme()} />	);
  }
}

ReactDOM.render(<Demo />, mountNode);

Menu 组件接收的菜单数据格式

[
  {
    id: 'category_admin',
    title: 'Admin',
    children: [
      {
        id: 'app_user_admin_menu_company',
        title: 'Company Mgmt',
        link: '/admin/company.html'
      },
      {
        id: 'app_user_admin_menu_ouadmin',
        title: 'OU Administrator',
        link: '/admin/ouadminlist.html'
      },
      {
        id: 'app_user_admin_menu_sysapp',
        title: 'Sys App Mgmt',
        link: '/admin/sysapp.html'
      }
    ]
  }
]

2. View

为需要做View权限控制的元素增加属性meta-enos-view-id，值设置为对应的权限 Id。

在 App 管理模块新增类型为View的权限，并为指定用户分配对应的 App 和权限，权限 Id 填写为上一步设置的值。

当用户对于某一个View无权限时，默认不显示该View，如需要为无权限View保留页面渲染位置，可以为元素

添加属性meta-enos-view-reserve=‘true’。

前端元素配置示例

 <!-- 完全不显示 -->
 <div meta-enos-view-id='qwerty'>I am control point</div>
 <!-- 保留占位 -->
 <div meta-enos-view-id='qwerty' meta-enos-view-reserve='true'>I am reserved control point</div>

3. Data

获取数据相关权限列表。

portalSdk.getDataPermissions();

返回示例

[
  {
    "permissionId": 0,
    "elementId": "model.name",
    "permissionName": "model_name",
    "permissionType": 2,
    ...
  },
  {
    "permissionId": 1,
    "elementId": "model.phone",
    "permissionName": "model_phone",
    "permissionType": 2,
    ...
  }
]