# apbas-jssdk

> webbas-jssdk

Latest version **0.0.3** (published 2021-06-21) · MIT license · 0 weekly downloads

## Install

```sh
npm install apbas-jssdk
pnpm add apbas-jssdk
yarn add apbas-jssdk
bun add apbas-jssdk
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.3 |
| Published | 2021-06-21 |
| First published | 2021-06-21 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Node | >= 6.0.0 |
| Dependencies | 2 |
| Unpacked size | 23.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | apnpm |
| Maintainers | yypnpm |

## Links

- npm: https://www.npmjs.com/package/apbas-jssdk
- npm.io page: https://npm.io/package/apbas-jssdk

## Dependencies (2)

- [@babel/runtime](https://npm.io/package/@babel/runtime.md) ^7.5.5
- [@babel/polyfill](https://npm.io/package/@babel/polyfill.md) ^7.4.4

## Recent versions

- 0.0.3 (latest) — 2021-06-21
- 0.0.2 — 2021-06-21

## README

# apbas-jssdk

apbas-jssdk是提供给接入到bas系统（A平台）的子项目使用的js库。
apbas-jssdk有三个模块：
1. Auth 鉴权数据助手
2. AuthDirective 鉴权指令
3. Bridge iframe通讯工具

iframe通讯技术基于`postmessage`（使用了[postmate](https://github.com/dollarshaveclub/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平台），必须进行联调测试。

---
_Source: https://npm.io/package/apbas-jssdk · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._