Vue 3 SSO授权回调流程包含识别回调、提取验证凭证、持久化存储、同步状态四环节：需路由守卫拦截含code/token的重定向URL，调用后端接口校验并安全存储凭证，按from参数跳转原页面，并通过Pinia统一管理登录态与自动刷新。
Vue 3 中处理单点登录（SSO）的授权回调流程，核心在于「识别回调、提取凭证、验证并持久化、同步状态」四个环节。它不是单纯存个 token 就完事，而是一套前后端协同、前端主动响应的闭环逻辑。
识别回调 URL 并拦截跳转
用户从认证中心重定向回你的 Vue 应用时，URL 通常携带关键参数，比如 code（OAuth2 授权码）、token（JWT 直接令牌）或 testCode 等。你必须在路由守卫中第一时间捕获这些信号：
- 使用
window.location.href（而非to.fullPath）读取完整 URL，因为 hash 模式下 query 参数可能被 router 忽略 - 正则匹配常见参数，例如：
/[?&]code=([^&]+)/或/[?&]token=([^&]+)/ - 若匹配成功，阻止默认导航（
next(false)），进入回调处理流程；否则放行
提取并验证凭证，获取用户身份
拿到 code 或 token 后，不能直接信任——尤其是 code，必须换 token；而直接传来的 token 也建议后端校验：
Springboot Vue Builder
下载
从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。
- 如果是 code：调用后端接口（如
/api/auth/exchange）换取 access_token 和用户信息，避免前端暴露 client_secret - 如果是 token（如 SSO 服务直发）：仍需调用后端
/api/auth/validate接口做签名校验和有效期检查，防止伪造 - 验证成功后，将 token 存入 cookie（带 httpOnly=false + Secure + SameSite=Lax） 或 localStorage；用户信息建议存 localStorage，方便组件读取
持久化后跳转到原始目标页
用户最初访问某个受保护页面（如 /dashboard）时被踢去登录，回来时应“回到那里”，而不是总跳首页：
- 跳转前把当前 URL（
window.location.href）作为redirect_uri或 query 参数（如?from=/dashboard）传给认证中心 - 回调时解析该参数，优先跳转
from值；若无，则 fallback 到首页或仪表盘 - 注意清除临时参数，避免重复触发回调逻辑（例如跳转后手动移除 URL 中的
code）
统一状态管理与自动刷新
登录态不能只靠路由守卫“查一次”，要让整个应用感知并响应：
- 用 Pinia 创建 auth store，暴露
isAuthenticatedgetter 和setToken(user)action - 在
main.js或根组件onMounted中调用authStore.restoreFromStorage()，实现页面刷新后状态恢复 - 配置 axios 请求拦截器：自动注入
Authorization: Bearer xxx；响应拦截器中监听 401，触发登出并跳转登录页
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
