warpin-sso-sdk 使用说明

本插件在Vue3添加自定义指令控制按钮显隐，同时使用WindowMessagePlugin对象接收窗口通信来的数据。本文档将介绍如何在 Vue 项目中安装和使用 warpin-sso-sdk 插件。

安装

首先，您需要通过 npm 安装该插件：

npm i @warpin.cn/warpin-sso-sdk

使用方法

1. 在 Vue 项目中使用插件

在你的 main.js 文件中进行如下设置：

import ComprehensivePlugin, { WindowMessagePlugin } from '@warpin.cn/warpin-sso-sdk'; // 导入插件和 WindowMessagePlugin

// 安装 ComprehensivePlugin 插件，用于控制按钮显隐
app.use(ComprehensivePlugin)
// 传递自定义指令名称，不传默认hasRole。
// app.use(ComprehensivePlugin, { directiveName: 'custom-role' })

// 创建 WindowMessagePlugin 实例
const messagePlugin = new WindowMessagePlugin()
// 如果想限制接收来自某个域名的消息，传入service
// const messagePlugin = new WindowMessagePlugin({ service: 'http://your-service-url' })

// 挂载 messagePlugin 到 window 对象上
window.messagePlugin = messagePlugin

2. 自定义指令使用示例：控制按钮显隐

插件内置了一个自定义指令 hasRole，用于权限控制。你可以在组件中使用这个指令：

<template>
  <!-- 只有拥有5LY4VYVV9JJ权限标识的用户可以看到这个按钮 -->
  <el-button v-hasRole="['5LY4VYVV9JJ']" type="warning" plain icon="Download" @click="handleExport">导出</el-button>
</template>

3. WindowMessagePlugin使用示例：路由守卫中使用 WindowMessagePlugin

在你的 router/index.js 文件中，可以使用 window.messagePlugin 来处理窗口消息。例如，获取ST进行服务验证：

// 路由守卫
router.beforeEach(async (to, from) => {
  // 订阅消息
  window.messagePlugin.onMessage((data) => {
    const { st, role, loginType } = data
    // 使用ST进行服务验证......
  })
  // 订阅错误
  messagePlugin.onError((error, data) => {
    console.log('Error:', error, data)
  })

  // 销毁插件
  // messagePlugin.destroy();

  return true
})

export default router