@npm.365xs.cn/vue-admin-framework

向上集团 Vue 3 公共管理后台框架。包统一提供 OAuth 2.0 Authorization Code + PKCE、 标准当前用户与全应用菜单读取、会话状态、动态侧栏、顶部用户区和访问页签。

消费应用只负责业务 Router、admin-resources.json、Mock 数据、品牌配置和业务页面。项目 需要安装 Vue 3、Vue Router、Element Plus 和 @element-plus/icons-vue。

标准 Access API

真实模式下由 createAdminFrameworkSession 内部统一调用：

GET /api/current/me
GET /api/me/menus
Authorization: Bearer <application-access-token>

/api/me/menus 不带 applicationCode，必须返回 applicationCode: null 的全应用菜单。 公共包统一处理 Bearer Header、有效 Token 获取、401 单次刷新、响应校验、菜单规范化、 顶部用户信息和菜单加载状态。消费应用不得重复实现这两个标准客户端。

安装

npm install @npm.365xs.cn/vue-admin-framework

应用入口同时引入样式：

import '@npm.365xs.cn/vue-admin-framework/style.css'

Session 接入

import { defineStore } from 'pinia'
import { createAdminFrameworkSession } from '@npm.365xs.cn/vue-admin-framework'
import { oauthClient } from '@/services/auth'
import { mockMenus, mockUser } from '@/config/resources'

export const useSessionStore = defineStore('session', () =>
  createAdminFrameworkSession({
    oauthClient,
    accessApiBaseUrl: import.meta.env.VITE_ACCESS_API_BASE_URL || '',
    mockUser,
    mockMenus,
    defaultReturnUrl: '/admin/overview',
    storageKeysToClear: ['admin_visited_tabs'],
  }),
)

路由守卫使用 session.ensureAuthenticated()、session.login() 和 session.ensureLoaded()；布局直接绑定 session.menus、session.username、 session.loginAccount、session.initials、session.navigationLoaded 和 session.navigationError。

跨应用单点登录

每个应用必须使用独立 OAuth Client、PKCE、本地 Access Token 和 Audience。禁止复制或共享 Access Token，也禁止把 Token 放入 URL、父域 Cookie 或跨应用共享存储。

跨应用免重复输入密码依赖 OAuth Authority 的 HttpOnly SSO Cookie：目标应用没有本地 Token 时仍进入标准 /oauth2/authorize，Authority 识别已有登录会话后直接签发目标应用授权码， 目标应用再换取自己的 Token。显式切换账号或退出当前应用后重新登录时，框架使用 prompt=login 强制展示登录页。

菜单与跨应用导航

菜单节点类型 FrameworkMenuNode 可携带 menuDomain?: string | null，表示所属应用的前端 基础 URL，可包含 /web/ 等部署基路径。菜单 route 保持以 / 开头的应用内逻辑路径， 不得重复包含部署基路径。公共包不会把外部菜单注册到本地 Router；消费应用应使用 createExternalMenuHrefResolver 安全组合其他应用的基础 URL 与 route，并通过整页跳转进入 目标应用。resolver 会拒绝 UserInfo、query、fragment、路径穿越和编码路径分隔符，且不会在 URL 中附加 Token。

发布产物

包只发布 ESM，并包含：

• dist/index.js
• dist/index.d.ts
• dist/style.css
• 组件和公共类型声明

发布前运行：

npm run build
npm pack --dry-run