SSO 回调页面开发说明新建文件创建 src/views/sso-callback.vuetemplatedivclasssso-callbackp{{message}}/p/div/templatescript langtssetupimport{onMounted,ref}fromvue;import{useRouter,useRoute}fromvue-router;import{CacheToken}from/constants/cacheKey;import{setCache}from/utils/cache;import{ElMessage}fromelement-plus;importbaseServicefrom/service/baseService;constrouteruseRouter();constrouteuseRoute();constmessageref(SSO 登录处理中...);onMounted(async(){// 从 URL hash 中提取 code 参数constcoderoute.query.codeasstring;if(!code){message.value缺少授权码无法完成单点登录;ElMessage.error(message.value);setTimeout(()router.replace(/login),2000);return;}try{// 调用后端接口用 code 换 JWTconstresawaitbaseService.post(/sso/token,{code});if(res.code0res.data?.token){// 存入 sessionStoragekey 为 v1CacheToken值为 {token: xxx}setCache(CacheToken,{token:res.data.token},true);ElMessage.success(SSO 登录成功);router.replace(/);}else{message.valueres.msg||SSO 登录失败;ElMessage.error(message.value);setTimeout(()router.replace(/login),2000);}}catch(e){message.valueSSO 登录异常请稍后重试;ElMessage.error(message.value);setTimeout(()router.replace(/login),2000);}});/scriptstyle scoped.sso-callback{display:flex;align-items:center;justify-content:center;height:100vh;font-size:18px;color:#666;}/style注册路由在 src/router/base.ts 中添加importSsoCallbackfrom/views/sso-callback.vue;// 在 routes 数组中添加放在 /login 路由之后即可{path:/sso/callback,component:SsoCallback,meta:{title:SSO 登录回调,isNavigationMenu:false}},确保路由守卫放行如果项目有路由守卫router guard需要确保 /sso/callback 页面不需要登录态就能访问否则会死循环。检查 src/router/index.ts 或类似文件中的 beforeEach 逻辑加上// 白名单页面不需要 tokenconstwhiteList[/login,/sso/callback];if(whiteList.includes(to.path)){next();return;}后端接口说明5. Token 存储方式必须和现有登录方式保持一致// 存储setCache(CacheToken,{token:jwt值},true);// true sessionStorage// 实际存储效果sessionStorage[v1CacheToken] {token:jwt值}总结就 3 件事新建 sso-callback.vue 页面在 base.ts 注册路由确保路由守卫放行该页面后端接口已经开发好并放行了前端直接调就行。