cwa-auth-client-vue

cwa-auth-client-vue

CWA 统一认证客户端 - Vue 适配包（Vue 2.6+ / Vue 3）。提供组合式函数、插件、指令与路由守卫，并 re-export 框架无关核心（cwa-auth-client-core，构建时已内联打包）的全部 API——本包完全自包含，安装这一个包即可。

Vue 2.6 说明：路由守卫（推荐接入方式）与插件完全可用；组合式函数降级为非响应式实现（见下文「组合式函数」），v-auth 等指令在 Vue 2 下不生效（依赖 Vue 3 指令钩子名）。

React 项目请使用 cwa-auth-client-react。

安装

npm install cwa-auth-client-vue

快速开始（推荐：路由守卫唯一初始化入口）

全部配置集中在路由文件，main.ts 无需任何初始化代码：

// src/router/index.ts
import { createRouter, createWebHistory } from 'vue-router';
import { setupAuthGuard } from 'cwa-auth-client-vue';

const router = createRouter({
  history: createWebHistory(),
  routes: [ /* ... */ ]
});

router.beforeEach(setupAuthGuard({
  projectId: 'my-project',
  // ssoBaseUrl / uc3Url 一般无需配置（默认值见文档）；projectModel 已弃用，无需配置
  onAuthComplete: async (to, from, next, result) => {
    // 认证通过后的业务逻辑（动态路由、进度条等）
    next();
  }
}));

export default router;

// main.ts —— 保持干净，无需引入 cwa-auth-client-vue
import { createApp } from 'vue';
import App from './App.vue';
import router from './router';

createApp(App).use(router).mount('#app');

Vue 2.6 + vue-router 3 接入示例

// src/router/index.js
import VueRouter from 'vue-router';
import { setupAuthGuard } from 'cwa-auth-client-vue';

const router = new VueRouter({
  mode: 'history',
  routes: [ /* ... */ ]
});

router.beforeEach(setupAuthGuard({
  projectId: 'my-project',
  onAuthComplete: async (to, from, next, result) => {
    next();
  }
}));

export default router;

组合式函数

import { onMounted } from 'vue';
import { useUnifiedAuth, useUC3Login } from 'cwa-auth-client-vue';

const { isAuthenticated, token, userInfo, initialize, logout } = useUnifiedAuth();
const { jumpToLogin } = useUC3Login();

onMounted(() => initialize());

Vue 2.6 限制：Vue 2.6 无 Composition API（2.7 才内置），组合式函数在 2.6 下会降级——返回的 ref 为普通 { value } 对象（非响应式），onMounted 回调立即同步执行，inject 直接走 window.__CWA_AUTH_MANAGER__ 回退。方法调用（initialize/logout/jumpToLogin 等）不受影响。Vue 2.7 / 3 行为完全不变。

从旧包 cwa-auth-client(≤2.1.x) 迁移

迁移 = 修改 import 来源包名，其余用法不变。

行为变化

• handleAuthCallback() 在 URL 无认证参数且未开启本地登录时返回 { success: false, errorCode: 'AUTH_FAILED' }，不再抛出异常；可先用 hasAuthParams() 预判
• projectModel 配置项已弃用（可选、可留可删，不影响任何运行时逻辑）

产物兼容性

• 产物语法 ≤ ES2015、无 import.meta —— webpack 4（acorn 6）/ vue-cli 4 / umi 等老工具链可直接构建
• 依赖 vue 仅以 namespace 形式导入（内部 vue-compat 兼容层运行时检测），webpack 4 + Vue 2.6 构建无 "export 'ref' was not found in 'vue'" 类告警
• peerDependencies: vue ^2.6.0 || ^3.0.0（2.6 / 2.7 / 3 同一份产物）
• 双格式：ESM + CJS（.cjs），main/module/types 三件套齐备
• cwa-auth-client-core 构建时内联打包，本包自包含、无额外运行时依赖

License

MIT