@witlink/sts 库介绍

安全模块提供两个页面级组件StsManagePage、StsTokenPage。

如何使用@witlink/sts

1. 安装@witlink/sts

npm install @witlink/sts

2. 使用@witlink/sts

import WitlinkSTS, {
  setLang,        // 宿主切换多语言时调用此方法通知sts模块,zh_CN、en_US、fr_FR
  setTimezone,    // 设置时区如 Etc/GMT+8
  // Page组件
  StsManagePage,     // 安全模块管理
  StsTokenPage,      // 业务Token列表
} from '@witlink/sts'

• 初始化

import WitlinkSTS from "@witlink/sts"

const app = createApp(App)
app.use(WitlinkSTS, {
  i18n,  // 宿主i18n对象
  pinia, // 宿主pinia对象
  tokenKey: 'pro__Access-Token',  // localStorage中存储token的key
  timezone: 'Etc/GMT+8',  // 时区
  theme: {
    colorPrimary: '#165dff',
  },
}) 

• 切换多语言

import { setLang } from "@witlink/sts"
setLang(lang)

• Page组件的使用

import type { RouteRecordRaw } from 'vue-router'
import { StsManagePage, StsTokenPage } from '@witlink/sts'
export const stsRoutes: RouteRecordRaw[]= [
  {
    path: 'stsManage',
    name: 'stsManage',
    component: StsManagePage,
  },
  {
    path: 'stsToken',
    name: 'stsToken',
    component: StsTokenPage,
  },
]

• 接口转发配置

// 在开发环境
// vite.config.ts中
 server: {
    proxy: {
      '/cisapi': {
        target: '当前系统的接口代理地址', //目标url
        changeOrigin: true, //支持跨域
        secure: false, // 跳过 HTTPS 证书检查
        rewrite: (path) =>
            path.replace(new RegExp("^" + '/cisapi'), ""),
      },
    },
  },

# 配置nginx转发
location /cisapi/ {
  proxy_pass  https://ip:port/; # 注意结尾的斜杠
  # 请求 /cisapi/user 会被转发到 http://ip:port/user
}