当前位置：首页 > news >正文

Vue3+ts使用oidc-client-ts

news 2025/9/13 6:02:15

配置 OIDC 客户端

在项目中创建 authOptions 对象，定义 OIDC 认证所需的配置项：

export const authOptions = {authority: 'https://xxxxxxxxx/UserCenter', // 认证服务器 URLclient_id: 'xxxx', // 客户端 IDredirect_uri: 'http://localhost:3000/callback', // 登录回调地址response_type: 'code', // 授权类型scope: 'IF.DataMaster.Writer IF.DataMaster.Reader IF.DataMaster.Modeler IF.DataMaster.Web', // 权限范围post_logout_redirect_uri: 'https://localhost:3000/', // 登出后重定向地址client_secret: 'xxxxxxxxxxx', // 客户端密钥
};

创建 OIDC 用户管理器

封装 UserManager 实例，管理用户认证状态：

import { OidcClientSettings, UserManager } from 'oidc-client-ts';const userManager = ref<UserManager>();
const oidcSettings = ref<OidcClientSettings>();export async function useUserManager(): Promise<UserManager | undefined> {if (userManager.value) {return userManager.value;}const settings = authOptions;if (settings) {oidcSettings.value = settings;userManager.value = new UserManager(settings);return userManager.value;}return undefined;
}

登录逻辑

调用 signinRedirect 发起 OIDC 登录：

export async function signinlogin() {useUserManager().then((mgr) => {if (mgr) {mgr.signinRedirect();}});
}

处理登录回调

在回调页面解析用户信息并获取 Token：

async function signinCallback() {try {const mgr = await useUserManager();if (!mgr) return null;await mgr.signinCallback();const user = await mgr.getUser();const jwt_token = user?.access_token;if (!jwt_token) return null;const cc_token = await getTokenByJWTString(jwt_token);if (cc_token.startsWith('err@')) {message.error('OIDC 登录失败');return null;}return cc_token;} catch (error) {return Promise.reject(error);}
}

路由守卫集成

在路由守卫中检查 Token，未登录时触发 OIDC 登录：

export function createPermissionGuard(router: Router) {const userStore = useUserStoreWithOut();router.beforeEach(async (to, from, next) => {const token = userStore.getToken;if (!token && !to.meta.ignoreAuth) {signinlogin(); // 触发 OIDC 登录return;}next();});
}

Hash 路由兼容处理

若使用 Hash 路由，需在回调后清理 URL：

function createRedirectPageGuard(router: Router) {const userStore = useUserStore();router.beforeEach(async (to, _from, next) => {if (window.location.href.includes('/callback?')) {const token = await userStore.signinCallback();userStore.setToken(token as string);const { origin, pathname } = window.location;window.location.href = origin + pathname; // 清理回调参数return;}next();});
}