Hugo SaaS Backend

简体中文

English

简体中文

English

Appearance

前端集成 ​

本指南介绍如何将前端应用连接到本地运行的 Hugo SaaS Backend 服务。

前提条件 ​

先在本地启动所有服务：

bash
pnpm install
pnpm run db:reset
pnpm run dev:services

环境变量 ​

将前端指向以下本地端点：

dotenv
VITE_ADMIN_BFF_GRAPHQL_URL=http://127.0.0.1:4010/graphql
VITE_ENTITLEMENT_GRAPHQL_URL=http://127.0.0.1:4317/graphql
VITE_ENTITLEMENT_REST_URL=http://127.0.0.1:4317
VITE_IDENTITY_REST_URL=http://127.0.0.1:4320
VITE_DEMO_ORGANIZATION_ID=org-demo-001
变量用途
VITE_ADMIN_BFF_GRAPHQL_URLAdmin BFF GraphQL 端点，用于组织、用户、成员关系、角色和活动日志查询
VITE_ENTITLEMENT_GRAPHQL_URLEntitlement Service GraphQL 端点，用于产品、权益和分配的读取操作
VITE_ENTITLEMENT_REST_URLEntitlement Service REST 端点，用于分配更新和批量导入操作
VITE_IDENTITY_REST_URLIdentity Service 端点，用于演示账号切换

本地开发无需鉴权，CORS 已为所有本地来源开启。

接口调试工具 ​

服务运行后可使用以下交互式工具，地址仅供本地开发参考：

工具地址
Admin BFF GraphiQLhttp://127.0.0.1:4010/graphiql
Entitlement GraphiQLhttp://127.0.0.1:4317/graphiql
Entitlement Swagger UIhttp://127.0.0.1:4317/docs
Identity Swagger UIhttp://127.0.0.1:4320/docs

无需启动服务即可浏览的静态 REST 参考，可从 REST 接口章节进入对应的 Redoc 参考页。

演示账号切换 ​

Identity Service 提供了一个简单的账号切换菜单，方便本地开发时在不同角色的演示用户之间切换，查看不同权限下的界面效果。它不做真正的鉴权——不涉及真实凭据或身份提供商。

  1. 获取可用的演示账号：GET /demo/accounts
  2. 选择账号并获取会话 Token：POST /demo/token，请求体为 { "userId": "..." }
  3. 获取选中用户的资料：GET /userinfo，带上 Authorization: Bearer <token> 头

示例代码：

ts
const accountsRes = await fetch('http://127.0.0.1:4320/demo/accounts');
const accounts = await accountsRes.json();

const tokenRes = await fetch('http://127.0.0.1:4320/demo/token', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ userId: accounts.defaultAccountId }),
});
const { access_token } = await tokenRes.json();

const userInfoRes = await fetch('http://127.0.0.1:4320/userinfo', {
  headers: { Authorization: `Bearer ${access_token}` },
});
const userInfo = await userInfoRes.json();

Admin BFF 和 Entitlement Service 不会对本地请求校验该 Token；它的作用仅仅是让前端能在界面上展示当前账号的上下文信息（如用户名、角色等）。

API 参考 ​

MIT Licensed