单点登录相关代码

.env.development

@@ -10,4 +10,13 @@ VITE_APP_BASE= 'http://localhost:8088'
 #单点登录设置
 VITE_APP_SSO_LOGIN  = 'false'
 VITE_APP_CAS_SERVER = 'https://www.cainiao.com:8443/cas'
-VITE_APP_CLIENT_LOGIN = 'http://localhost:3000/#/casLogin'
+VITE_APP_CLIENT_LOGIN = 'http://localhost:3000/#/casLogin'
+
+# 登录模式：legacy（原登录页）或 hybrid
+VITE_AUTH_MODE = 'legacy'
+# keycloak 运行地址
+VITE_KEYCLOAK_URL = 'http://127.0.0.1:8180'
+#领域名称
+VITE_KEYCLOAK_REALM = 'xg-cloud'
+#客户端名称
+VITE_KEYCLOAK_CLIENT_ID = 'xg-cloud-web'

.env.production

@@ -2,7 +2,7 @@
 VITE_APP_ENV = 'production'
 
 #接口地址，生产环境就是为空
-VITE_APP_API= 
+VITE_APP_API=
 
 #Jeeplus快速开发平台/后台地址, 使用多租户时，相对地址，解决跨域问题。
 VITE_APP_BASE= '/api'
@@ -15,3 +15,9 @@ VITE_BUILD_COMPRESS = gzip
 VITE_APP_SSO_LOGIN  = 'false'
 VITE_APP_CAS_SERVER = 'https://www.cainiao.com:8443/cas'
 VITE_APP_CLIENT_HOST = 'http://localhost:3000'
+
+# 登录模式：legacy（原登录页）或 hybrid
+VITE_AUTH_MODE = 'legacy'
+VITE_KEYCLOAK_URL = 'http://127.0.0.1:8180'
+VITE_KEYCLOAK_REALM = 'xg-cloud'
+VITE_KEYCLOAK_CLIENT_ID = 'xg-cloud-web'

package.json

@@ -36,6 +36,7 @@
     "jquery": "^3.6.0",
     "js-base64": "^3.7.5",
     "js-cookie": "3.0.0",
+	"keycloak-js": "26.2.4",
     "lodash": "^4.17.21",
     "lodash.omit": "^4.5.0",
     "lodash.pick": "^4.4.0",

src/api/auth/loginService.js

@@ -16,6 +16,15 @@ export default {
 			data: data,
 		});
 	},
+	oidcLogin: function (accessToken) {
+		return request({
+			url: prefix + "/user/oidc/login",
+			method: "post",
+			headers: {
+				Authorization: `Bearer ${accessToken}`,
+			},
+		});
+	},
 	ddlogin: function (inputForm) {
 		return request({
 			url: prefix + "/user/sys/ddLogin",

src/auth/keycloak.js

@@ -0,0 +1,89 @@
+import Keycloak from "keycloak-js";
+
+const authMode = (import.meta.env.VITE_AUTH_MODE || "legacy").toLowerCase();
+
+export const isOidcEnabled = authMode === "keycloak" || authMode === "hybrid";
+export const isOidcRequired = authMode === "keycloak";
+
+const keycloak = isOidcEnabled
+	? new Keycloak({
+			url: import.meta.env.VITE_KEYCLOAK_URL,
+			realm: import.meta.env.VITE_KEYCLOAK_REALM,
+			clientId: import.meta.env.VITE_KEYCLOAK_CLIENT_ID,
+	  })
+	: null;
+
+let initializationPromise = null;
+let initialized = false;
+
+function redirectUri() {
+	return `${window.location.origin}${window.location.pathname}`;
+}
+
+export async function initializeKeycloak({
+	loginRequired = isOidcRequired,
+	checkSso = false,
+} = {}) {
+	if (!isOidcEnabled) {
+		return false;
+	}
+	if (!initializationPromise) {
+		const options = {
+			pkceMethod: "S256",
+			locale: "zh-CN",
+			redirectUri: redirectUri(),
+			responseMode: "query",
+			checkLoginIframe: false,
+		};
+		if (loginRequired) {
+			options.onLoad = "login-required";
+		} else if (checkSso) {
+			options.onLoad = "check-sso";
+		}
+		initializationPromise = keycloak
+			.init(options)
+			.then((authenticated) => {
+				initialized = true;
+				return authenticated;
+			})
+			.catch((error) => {
+				initializationPromise = null;
+				throw error;
+			});
+	}
+	const authenticated = await initializationPromise;
+	keycloak.onTokenExpired = () => {
+		keycloak.updateToken(30).catch(() => keycloak.login());
+	};
+	return authenticated;
+}
+
+export async function loginWithIdentityProvider() {
+	if (!isOidcEnabled || !keycloak) {
+		throw new Error("统一认证登录未启用");
+	}
+	await initializeKeycloak({ loginRequired: false });
+	await keycloak.login({
+		redirectUri: redirectUri(),
+		locale: "zh-CN",
+	});
+}
+
+export function getKeycloakAccessToken() {
+	return keycloak && keycloak.token;
+}
+
+export async function logoutFromIdentityProvider() {
+	if (
+		!isOidcEnabled ||
+		!keycloak ||
+		!initialized ||
+		!keycloak.authenticated
+	) {
+		return false;
+	}
+	await keycloak.logout({ redirectUri: window.location.origin });
+	return true;
+}
+
+export default keycloak;

src/auth/oidcBootstrap.js

@@ -0,0 +1,73 @@
+import Cookies from "js-cookie";
+import config from "@/config";
+import loginService from "@/api/auth/loginService";
+import userService from "@/api/sys/userService";
+import tenantService from "@/api/sys/tenantService";
+import store from "@/store";
+import tool from "@/utils/tool";
+import {
+	getKeycloakAccessToken,
+	initializeKeycloak,
+	isOidcEnabled,
+	isOidcRequired,
+} from "./keycloak";
+
+function isOidcCallback() {
+	const params = new URLSearchParams(window.location.search);
+	return params.has("state") && (params.has("code") || params.has("error"));
+}
+
+export async function bootstrapOidcSession() {
+	if (!isOidcEnabled) {
+		return;
+	}
+
+	const callback = isOidcCallback();
+	const localToken = tool.data.get(config.TOKEN);
+	if (!isOidcRequired && !callback && localToken) {
+		return;
+	}
+
+	const authenticated = await initializeKeycloak({
+		loginRequired: isOidcRequired,
+		checkSso: !isOidcRequired && !callback,
+	});
+	if (!authenticated) {
+		if (!isOidcRequired) {
+			return;
+		}
+		throw new Error("Keycloak authentication did not establish a session");
+	}
+	const accessToken = getKeycloakAccessToken();
+	if (!accessToken) {
+		throw new Error(
+			"Keycloak authentication did not return an access token"
+		);
+	}
+
+	const loginResponse = await loginService.oidcLogin(accessToken);
+	tool.data.set(config.TOKEN, loginResponse.token);
+	Cookies.set(config.TOKEN, loginResponse.token);
+	tool.data.set("AUTH_SOURCE", "oidc");
+
+	const { user } = await userService.info();
+	tool.data.set("USER_INFO", user);
+	store.commit("user/updateUser", user);
+
+	const isPrimaryTenant = user.tenantDTO.id === "10000";
+	tool.data.set("IS_PRIMARY_TENANT", isPrimaryTenant);
+	if (isPrimaryTenant) {
+		const tenants = await tenantService.list();
+		tool.data.set("TENANT_LIST", tenants.records);
+	} else {
+		tool.data.remove("TENANT_LIST");
+	}
+
+	const { menuList, permissions, dictList } = await userService.getMenus();
+	if (!menuList || menuList.length === 0) {
+		throw new Error("当前用户在此系统没有任何菜单权限，请联系系统管理员");
+	}
+	tool.data.set("MENU", menuList);
+	tool.data.set("PERMISSIONS", permissions);
+	tool.data.set("DICT_LIST", dictList);
+}

src/layout/components/userbar.vue

@@ -79,6 +79,7 @@ import setting from "./../components/setting.vue";
 import notifyService from "@/api/notify/notifyService";
 import config from "@/config";
 import UpdatePassword from "@/views/layout/UpdatePassword2.vue";
+import { logoutFromIdentityProvider } from "@/auth/keycloak";
 export default {
 	data() {
 		return {
@@ -185,7 +186,7 @@ export default {
 					confirmButtonClass: "el-button--danger",
 				})
 					.then(() => {
-						loginService.logout().then(() => {
+						loginService.logout().then(async () => {
 							if (this.$store.state.user.timer2) {
 								clearInterval(this.$store.state.user.timer2)
 								this.$store.state.user.timer2 = null
@@ -200,7 +201,10 @@ export default {
 							}
 							this.$cookies.remove(config.TOKEN);
 							this.$TOOL.data.remove(config.TOKEN);
-							this.$router.push({ path: "/login" });
+							const redirected = await logoutFromIdentityProvider();
+							if (!redirected) {
+								this.$router.push({ path: "/login" });
+							}
 						});
 					})
 					.catch(() => {

src/main.js

@@ -1,4 +1,5 @@
 import { createApp } from "vue";
+import Cookies from "js-cookie";
 import ElementPlus from "element-plus";
 import "element-plus/dist/index.css";
 import "element-plus/theme-chalk/display.css";
@@ -10,16 +11,17 @@ import "vxe-table/lib/style.css";
 import utils from "@/utils/index";
 import dictUtils from "@/utils/dictUtils";
 import httpRequest from "@/utils/httpRequest";
-import commonJS from '@/utils/common';
+import commonJS from "@/utils/common";
 import validator from "@/utils/validator";
-import validate from '@/utils/validate'
-import validatorXG from '@/utils/validatorXG'
-import validateXG from '@/utils/validateXG'
+import validate from "@/utils/validate";
+import validatorXG from "@/utils/validatorXG";
+import validateXG from "@/utils/validateXG";
 import components from "./components";
 import i18n from "./i18n";
 import router from "./router";
 import store from "./store";
 import App from "./App.vue";
+import config from "@/config";
 import lodash from "lodash/object";
 import VueClipboard from "vue-clipboard2";
 import VueCookies from "vue-cookies";
@@ -31,6 +33,8 @@ import FormMaking from "jeeplus-form-v3";
 import "jeeplus-form-v3/dist/index.css";
 
 import tool from "@/utils/tool";
+import { bootstrapOidcSession } from "@/auth/oidcBootstrap";
+import { isOidcRequired, logoutFromIdentityProvider } from "@/auth/keycloak";
 
 const app = createApp(App);
 import "moment/locale/zh-cn";
@@ -47,9 +51,9 @@ app.config.globalProperties.recover = utils.recover;
 app.config.globalProperties.recoverNotNull = utils.recoverNotNull;
 app.config.globalProperties.pickProperties = utils.pickProperties;
 app.config.globalProperties.validator = validator;
-app.config.globalProperties.validate = validate
-app.config.globalProperties.validatorXG = validatorXG
-app.config.globalProperties.validateXG = validateXG
+app.config.globalProperties.validate = validate;
+app.config.globalProperties.validatorXG = validatorXG;
+app.config.globalProperties.validateXG = validateXG;
 app.config.globalProperties.moment = moment;
 app.config.globalProperties.lodash = lodash;
 app.config.globalProperties.deepClone = utils.deepClone;
@@ -58,31 +62,94 @@ app.config.globalProperties.$http = httpRequest; // ajax请求方法
 app.config.globalProperties.commonJS = commonJS; // ajax请求方法
 app.config.globalProperties.$cookies = VueCookies;
 
-app.use(store);
-app.use(router);
-app.use(ElementPlus, { locale });
-app.use(i18n);
-app.use(components);
+async function startApplication() {
+	// The router is installed only after the OIDC exchange and menu bootstrap,
+	// so its first navigation sees the existing local token and dynamic menus.
+	await bootstrapOidcSession();
 
-// app.use(FormMaking)
+	app.use(store);
+	app.use(router);
+	app.use(ElementPlus, { locale });
+	app.use(i18n);
+	app.use(components);
 
-app.use(FormMaking, {
-	locale:
-		tool.data.get("APP_LANG") === "zh"
-			? "zh-cn"
-			: tool.data.get("APP_LANG") || "zh-cn",
-});
-app.use(JeeplusDevtools);
-app.use(JeeplusFlow);
-app.use(VueClipboard);
-app.use(VueCookies);
-
-VXETable.setup({
-	// 对组件内置的提示语进行国际化翻译
-	i18n: (key, args) => i18n.global.t(key, args),
-});
+	// app.use(FormMaking)
+	app.use(FormMaking, {
+		locale:
+			tool.data.get("APP_LANG") === "zh"
+				? "zh-cn"
+				: tool.data.get("APP_LANG") || "zh-cn",
+	});
+	app.use(JeeplusDevtools);
+	app.use(JeeplusFlow);
+	app.use(VueClipboard);
+	app.use(VueCookies);
 
-app.use(VXETable);
+	VXETable.setup({
+		// 对组件内置的提示语进行国际化翻译
+		i18n: (key, args) => i18n.global.t(key, args),
+	});
+	app.use(VXETable);
+	app.mount("#app");
+}
 
-//挂载app
-app.mount("#app");
+startApplication().catch(async (error) => {
+	Cookies.remove(config.TOKEN);
+	tool.data.remove(config.TOKEN);
+	tool.data.remove("AUTH_SOURCE");
+	tool.data.remove("USER_INFO");
+	tool.data.remove("MENU");
+	tool.data.remove("PERMISSIONS");
+	if (!isOidcRequired) {
+		try {
+			const redirected = await logoutFromIdentityProvider();
+			if (redirected) {
+				return;
+			}
+		} catch (logoutError) {
+			console.error("登录失败后，Keycloak注销失败", logoutError);
+		}
+		window.location.replace(
+			`${window.location.origin}${window.location.pathname}#/login`
+		);
+		return;
+	}
+	const root = document.getElementById("app");
+	if (root) {
+		root.replaceChildren();
+		const panel = document.createElement("div");
+		panel.style.cssText =
+			"max-width:720px;margin:80px auto;padding:24px;font-family:sans-serif";
+		const title = document.createElement("h2");
+		title.textContent = "单点登录失败";
+		const detail = document.createElement("p");
+		detail.textContent = String(
+			error && error.message ? error.message : error
+		);
+		const hint = document.createElement("p");
+		hint.textContent =
+			"当前统一认证账号在该租户中不存在或不可用，请退出后换用当前租户账号。";
+		const returnButton = document.createElement("button");
+		returnButton.type = "button";
+		returnButton.textContent = "退出统一认证并返回登录页";
+		returnButton.style.cssText =
+			"margin-top:16px;padding:10px 18px;border:0;border-radius:4px;background:#1890ff;color:#fff;cursor:pointer";
+		returnButton.addEventListener("click", async () => {
+			returnButton.disabled = true;
+			returnButton.textContent = "正在退出统一认证…";
+			try {
+				const redirected = await logoutFromIdentityProvider();
+				if (redirected) {
+					return;
+				}
+			} catch (logoutError) {
+				console.error("退出登录失败", logoutError);
+			}
+			window.location.replace(
+				`${window.location.origin}${window.location.pathname}#/login`
+			);
+		});
+		panel.append(title, detail, hint, returnButton);
+		root.append(panel);
+	}
+});

src/router/index.js

@@ -7,6 +7,7 @@ import tool from "@/utils/tool";
 import systemRouter from "./systemRouter";
 import { beforeEach, afterEach } from "./scrollBehavior";
 import { t2 } from "@/utils/index";
+import { isOidcEnabled } from "@/auth/keycloak";
 
 // 匹配views里面所有的.vue文件
 const modules = import.meta.glob("./../views/**/*.vue");
@@ -48,6 +49,10 @@ router.beforeEach(async (to, from, next) => {
 	let token = tool.data.get(config.TOKEN);
 
 	if (to.path === "/login" || to.path === "/ddlogin") {
+		if (isOidcEnabled && to.path === "/login" && token) {
+			next({ path: "/" });
+			return false;
+		}
 		//删除路由(替换当前layout路由)
 		router.addRoute(routes[0]);
 		//删除路由(404)
@@ -93,11 +98,13 @@ router.afterEach((to, from) => {
 
 router.onError((error) => {
 	NProgress.done();
-	if (error.message.includes('Failed to fetch dynamically imported module') || 
-	    error.message.includes('Importing a module script failed')) {
+	if (
+		error.message.includes("Failed to fetch dynamically imported module") ||
+		error.message.includes("Importing a module script failed")
+	) {
 		ElNotification.warning({
-			title: '系统更新',
-			message: '检测到版本更新，正在刷新页面...',
+			title: "系统更新",
+			message: "检测到版本更新，正在刷新页面...",
 			duration: 2000,
 		});
 		setTimeout(() => {

src/views/sys/login/components/login-form.vue

@@ -85,6 +85,17 @@
 					<el-button type="primary" :loading="loading" class="login-submit" @click="login"
 						:disabled="isLoginDisabled">登录</el-button>
 				</el-form-item>
+				<div v-if="oidcEnabled" class="oidc-login">
+					<div class="oidc-login-divider"><span>其他登录方式</span></div>
+					<el-button
+						class="oidc-login-button"
+						:loading="oidcLoading"
+						:disabled="loading"
+						@click="oidcLogin"
+					>
+						统一认证登录
+					</el-button>
+				</div>
 			</el-form>
 		</div>
 		<div v-else-if="whichPage === '2'" class="login-border">
@@ -137,6 +148,10 @@ import config from "@/config";
 import loginService from "@/api/auth/loginService";
 import userService from "@/api/sys/userService";
 import tenantService from "@/api/sys/tenantService";
+import {
+	isOidcEnabled,
+	loginWithIdentityProvider,
+} from "@/auth/keycloak";
 
 //在运用页面引入
 import { Base64 } from 'js-base64' //引入base64加密，用于记住密码
@@ -147,6 +162,8 @@ export default {
 			logo: "",
 			productName: "",
 			loading: false,
+			oidcLoading: false,
+			oidcEnabled: isOidcEnabled,
 			isShow: false,
 			captchaImg: "",
 			checked: false,
@@ -246,6 +263,7 @@ export default {
 		this.$TOOL.data.remove("USER_INFO");
 		this.$TOOL.data.remove("MENU");
 		this.$TOOL.data.remove("PERMISSIONS");
+		this.$TOOL.data.remove("AUTH_SOURCE");
 		this.$TOOL.data.remove("grid");
 		this.$store.commit("clearViewTags");
 		this.$store.commit("clearKeepLive");
@@ -265,6 +283,19 @@ export default {
 		},
 	},
 	methods: {
+		async oidcLogin() {
+			this.oidcLoading = true;
+			try {
+				await loginWithIdentityProvider();
+			} catch (error) {
+				this.oidcLoading = false;
+				this.$message.error(
+					error && error.message
+						? `统一认证登录失败：${error.message}`
+						: "统一认证登录失败，请稍后重试"
+				);
+			}
+		},
 		// 验证密码的函数
 		validatePassword() {
 			const password = this.inputForm.newPassword;
@@ -288,6 +319,7 @@ export default {
 						.login(this.inputForm)
 						.then(async (loginResp) => {
 							this.$TOOL.data.set(config.TOKEN, loginResp.token);
+							this.$TOOL.data.set("AUTH_SOURCE", "legacy");
 							this.$cookies.set(
 								config.TOKEN,
 								loginResp.token,
@@ -571,6 +603,40 @@ export default {
 		border-color: #1890ff;
 	}
 
+	.oidc-login {
+		margin-top: 8px;
+
+		&-divider {
+			position: relative;
+			margin: 18px 0;
+			color: #86909c;
+			font-size: 13px;
+			text-align: center;
+
+			&::before {
+				position: absolute;
+				top: 50%;
+				right: 0;
+				left: 0;
+				height: 1px;
+				background: #e5e6eb;
+				content: "";
+			}
+
+			span {
+				position: relative;
+				padding: 0 14px;
+				background: #fff;
+			}
+		}
+
+		&-button {
+			width: 100%;
+			color: #1890ff;
+			font-size: 16px;
+			border-color: #1890ff;
+		}
+	}
 
 }
 </style>

yarn.lock

@@ -3136,6 +3136,11 @@ jstoxml@^2.0.0:
   resolved "https://registry.npmmirror.com/jstoxml/-/jstoxml-2.2.9.tgz"
   integrity sha512-OYWlK0j+roh+eyaMROlNbS5cd5R25Y+IUpdl7cNdB8HNrkgwQzIS7L9MegxOiWNBj9dQhA/yAxiMwCC5mwNoBw==
 
+keycloak-js@26.2.4:
+  version "26.2.4"
+  resolved "https://registry.npmmirror.com/keycloak-js/-/keycloak-js-26.2.4.tgz#b96ff33ed08ff6fd8d1e09d9e5055c7b3f2fa918"
+  integrity sha512-PnXpR3ubETGOt0B/Qt2lxmPbkZr5bc3vlQsOqDoTPPQsZRp7JjhTKxlJ187uWh8qJhvBab6Gsjb06a8ayOPfuw==
+
 ko-sleep@^1.0.3:
   version "1.1.4"
   resolved "https://registry.npmmirror.com/ko-sleep/-/ko-sleep-1.1.4.tgz"