B端大仓文档

Appearance

常见问题 ​

梳理常见问题说明。

如何切换认证方式？ ​

library内置多种认证方式，默认为sso认证，(早期为uums，后sso接入统一登录平台)。

继承关系如下：

ts
// interface API
export interface IPassportService {
  login(redirectUrl?: string): void
  logout(): void
  fetchUserInfo(): Promise<IUserInfo>
  fetchPermission(): Promise<IPermissionData>
}

// UUMS 认证
class BasePassportService implements IPassportService {}

// SSO 认证
class SsoPassportService extends BasePassportService {}

// Mom 微前端认证
class MicroPassportService extends SsoPassportService {}

切换为uums认证方式：

ts
// main.ts
import { BasePassportService, ServiceType, provideServiceContext } from '@fs/lib'

provideServiceContext(ServiceType.passport, new BasePassportService())

切换为sso认证方式(默认)：

ts
// main.ts
import { ServiceType, SsoPassportService, provideServiceContext } from '@fs/lib'

provideServiceContext(ServiceType.passport, new SsoPassportService())

如何接入Mom平台微前端环境？ ​

以文控接入为例：

子应用 ​

子应用 document-control-management

  1. 注入微前端认证逻辑
ts
// mom微前端 认证
if (micro.isMicroApp) {
  provideServiceContext(ServiceType.passport, new MicroPassportService())
}
  1. 路由添加base

  1. 处理菜单路由事件

PS: 根据官方文档所述，似乎可以不必如下处理？

ts
// 微前端 环境处理
if (micro.isMicroApp) {
  // 监听基座下发的数据变化
  const microApp = micro.getMicroAppInstance()
  microApp.addDataListener((data: { path: string }) => {
    // 当基座下发跳转指令时进行跳转
    if (data.path) {
      app.router.push(data.path)
    }
  })
}

TIP

目的: 如何不改动业务系统任何代码，实现既能单独部署独立访问，又可以兼容微前端场景？

0.1.10 版本开始，上述第1,2,3条@fs/core模块已经内置，业务系统开发时无需关注，无需任何修改。

如文控支持微前端场景，要修改哪些地方？ ps: 可以忽略layout侧边栏的处理，因为后续会沉入fs-cli/vue3-admin-lib-template模板中，下一步也可能直接抽成模板App。

假如未来wms接入sso集成平台，直接升级大仓版本即可，无需任何修改。就可以实现子应用，主应用都不用任何代码修改。

主应用 ​

主应用 main-application

由于主应用菜单权限逻辑，是要到service平台配置，再到微前端管理平台配置，还要在主应用内做硬编码MAP映射，整个环节比较麻烦，且主应用有代码变动，子应用菜单有调整都要同步处理主应用。

以下示例仅说明如何做本地调试。

TIP

完整方式是去微前端管理平台配置localhost:port这样，但是要针对多个环境多次配置，比如开发调试时，测试环境时，生产环境，考虑本地开发方便起见，可直接按下述步骤修改源数据进行调试验证。

  • 方式一：直接修改标签数据<micro-app></micro-app>

点击任意菜单，即可访问子应用。

  • 方式二：修改API接口源数据

点击任意菜单，即可访问子应用。

以上仅示例本地调试阶段，跟具体业务无关，比如看一下样式是否有冲突，权限是否正常等，修改无需提交，

关键，与业务强相关，同时也比较痛苦的地方，是需要在多个平台配置菜单及权限，然后在主应用内硬编码菜单权限的映射关系，每新接一个子应用就需要手动去修改主应用的代码。

如何接入SSO集成平台微前端环境？ ​

不同于mom平台，接入sso集成平台会比较简单清晰，只需子应用做适配，无需关注主应用，更不用修改主应用代码。

子应用 ​

与mom接入一致，只需接入一次，接入后可支持mom平台和sso平台。

主应用 ​

与mom不同的是，sso集成平台菜单权限管理只依赖权限平台，权限统一管理，无须多平台乘多次配置，也无需任何代码改动。

本地开发如何调试？

由于权限平台对业务来说只需提供测试环境和生产环境，所以可直接修改权限平台接口返回的数据来进行本地调试，以下两个步骤同上述mom接入流程。

  • 方式一：直接修改标签数据<micro-app></micro-app>

然后点任意菜单即可进入本地所启应用。

  • 方式二：直接修改API接口源数据

然后点任意菜单即可进入本地所启应用。

TIP

针对上述子应用接入sso集成平台，或者接入mom平台，子应用只需少量改动即可，若不是对接mom，无需关注主应用，也无需任何代码改动。

文档参考 ​

如何接入sentry？ ​

大仓内置sentry统一配置，业务系统接入可参考文控系统，或wms系统。

详细对接文档见Sentry对接文档，或官方文档。

以下仅说明使用大仓如何接入：

  1. 添加sentry错误上报配置
ts
// main.ts
app.initSentry({
  dsn: 'https://c6000d****8b@sentry.fs.com/26', // 来自于sentry.fs.com平台创建project DSN
  release: __SENTRY_RELEASE__, // 来自于vite.define配置项，用于统一版本
})
  1. 添加sourcemap上传配置

添加环境配置

bash
# .env
# Sentry
SENTRY_ORG = sentry
SENTRY_URL = https://sentry.fs.com
SENTRY_AUTH_TOKEN = sntrys_eyxxxqMY // 来自于sentry.fs.com平台个人AuthToken

安装vite插件@sentry/vite-plugin，并添加相关配置

ts
// vite.config.ts
const project = env.VITE_APP_CODE.replace(/\B([A-Z])/g, '-$1').toLowerCase()
const release = `${project}@${env.npm_package_version}+${mode}`

// Put the Sentry vite plugin after all other plugins
sentryVitePlugin({
  disable: command !== 'build',
  project,
  org: env.SENTRY_ORG,
  authToken: env.SENTRY_AUTH_TOKEN,
  url: env.SENTRY_URL,
  telemetry: false,
  // debug: ['development', 'test'].includes(mode),
  release: {
    name: release,
    deploy: { env: mode },
  },
  sourcemaps: {
    assets: './dist/assets/**',
    ignore: ['node_modules'],
    filesToDeleteAfterUpload: './dist/**/*.map',
  },
  errorHandler: (err) => {
    console.log('sentry error:', err)
  },
})

模板化 ​

在大仓v0.1.10之后，已抽离出通用layout模板，上述如何接入微前端业务开发时无需关注，使用此模板内置独立访问独立部署，以及自动适应微前端场景，业务系统无需任何修改，另外也包含其他共用处理，只需按常规vue3项目开发即可。

详见项目模板说明。