apbas-jssdk

apbas-jssdk是提供给接入到bas系统（A平台）的子项目使用的js库。 apbas-jssdk有三个模块：

1. Auth 鉴权数据助手
2. AuthDirective 鉴权指令
3. Bridge iframe通讯工具

iframe通讯技术基于postmessage（使用了postmate库）。HTML5特性支持高级浏览器，低版本浏览器有兼容问题

Auth

鉴权数据助手，存取token和用户信息。

• getUserInfo()

 描述：获取用户信息
 传参：无
 返回：用户信息

• hasToken()

 描述：是否有token
 传参：无
 返回：true/false

AuthDirective

鉴权指令，创建自定义指令v-auth。

• init(Vue)

 描述：创建自定义指令
 传参：Vue对象
 返回：无

Bridge

与父系统（A平台）进行iframe通讯

• init(authCallback)

 描述：初始化，初始化成功后会向父窗口请求auth数据，成功后会执行回调
 传参：authCallback，回调函数
 返回：无

• logout()

 描述：登出，当子系统从接口中得到登录态失效的数据时调用
 传参：无
 返回：无

• routerReplace(url)

 描述：路由跳转，当子系统需要父窗口路由跳转时调用
 传参：url
 返回：无

• showBreadcrumb(tag)

 描述：父框架设置面包屑。
 传参：tag（Boolean），true显示，false隐藏
 返回：无
 版本: 0.0.7新增

• openWindow(data)

 描述：父框架打开新窗口
 传参：data.url（String），完整url；data.name（String），url名称
 返回：无
 版本: 0.0.8新增

接入指南

1. 安装

npm i apbas-jssdk -S

2. 在入口文件引入

在main.js引入apbas-jssdk，并且创建自定义指令v-auth。

注意：main.js指入口文件，名字以实际项目为准。

// 引入
import apbassdk from 'apbas-jssdk'
// 创建自定义指令v-auth
apbassdk.AuthDirective.init(Vue)

3. 原项目的初始化改造

在main.js中修改原初始化vue的代码，改为在apbassdk.Bridge.init()中的回调函数中初始化。

保证项目展示页面之前，已经能够获取的鉴权信息（apbassdk.Auth内保存的数据）

注意：main.js指入口文件，名字以实际项目为准。

const init = () => {
    /* eslint-disable no-new */
    new Vue({
        el: '#app',
        router,
        store,
        render: h => h(App)
    })
}

/**
 * 生产环境下以 iframe 方式授权
 * 开发环境下 自定义授权
 */
if (process.env.NODE_ENV === 'production') {
    apbassdk.Bridge.init(() => {
        store.commit('updateUser')
        init()
    })
} else {
    init()
}

4. 对鉴权信息的使用

本例子结合vuex使用，鉴权信息保存在vuex模块文件user.js中，包括用户信息，是否已经有登录权限和登出功能。

import apbassdk from 'apbas-jssdk'

const user = {
    state: {
        info: apbassdk.Auth.getUserInfo(),
        hasToken: apbassdk.Auth.hasToken()
    },

    mutations: {
        updateUser (state) {
            state.hasToken = apbassdk.Auth.hasToken()
            state.info = apbassdk.Auth.getUserInfo()
        },
        logout () {
            apbassdk.Bridge.logout()
        }
    }
}

export default user

5. 按钮权限设置 按钮权限是bas提供的能力，配合v-auth即可轻松使用。

在某vue文件，模板里使用v-auth="'wb_090104'"，wb_090104为该按钮对应的权限id（这需要与后台人员沟通获取）

demo1

<el-button
    v-auth="'wb_090104'"
    type="primary"
    size="medium"
    @click="handleEdit"
>编辑</el-button>

demo2，v-auth指令也可以用在不是按钮的元素上，没有限制

<el-table
    v-auth="'wb_090202'"
    v-loading="listLoading"
    :data="list"
    element-loading-text="Loading"
>

6. 联调测试

接入到bas系统（A平台），必须进行联调测试。