单点登录(SSO)系统

一、整体架构设计(核心原则)

先明确整体流程和核心约束,确保 Cookies 仅存储在认证中心域名下:

核心约束:

  • SSO 认证中心域名 下存储登录态 Cookie(如 sso_token);
  • 各业务系统前端不存储任何登录态 Cookie,仅在内存 /localStorage 存储临时业务 token;
  • 跨域登录态通过「授权码模式」传递,避免 Cookie 跨域问题。

二、各角色职责与提供的服务

核心职责
职责项 具体操作 技术实现
登录态检测 初始化时检测当前是否有有效业务 token,无则跳转认证中心 路由守卫(beforeEach)
认证跳转 拼接认证中心地址 + 业务系统回调地址,跳转至 SSO 登录页 动态拼接 URL 参数
授权码处理 认证中心重定向回业务系统时,解析 URL 中的授权码 URLSearchParams
临时 token 管理 存储业务后端返回的临时 token(内存 /localStorage),无 Cookie Pinia/Vuex + 内存变量
接口请求拦截 所有接口请求携带临时 token(Header 中),无 Cookie 传递 Axios 拦截器
登出处理 跳转认证中心登出接口,清除本地临时 token 跳转 SSO 登出地址 + 清除本地存储
前端提供的服务
  • 标准化的认证跳转组件(可复用的 SSO 登录跳转逻辑);
  • 统一的 token 管理工具(Pinia/Vuex 模块,封装 token 增删查);
  • 跨域认证回调处理页面(callback.vue);
  • 无 Cookie 的接口请求封装(Axios 拦截器)。

2. 后端:核心职责是「授权码校验 + 业务 token 生成 + 跨域认证接口」

核心职责(分「认证中心后端」和「业务系统后端」)
角色 职责项 具体操作
认证中心后端 登录接口 验证用户名密码,生成 sso_token,存储至认证中心 Cookie(仅本域名)
认证中心后端 授权码生成 验证业务系统合法性,生成一次性授权码,重定向回业务系统
认证中心后端 授权码校验 接收业务后端的校验请求,验证授权码有效性,返回 sso_token
认证中心后端 登出接口 清除认证中心 Cookie 中的 sso_token,并重定向至各业务系统登出页
业务系统后端 授权码兑换 接收前端的授权码,调用认证中心接口校验,获取 sso_token
业务系统后端 业务 token 生成 基于 sso_token 生成业务系统专属临时 token(JWT),返回前端
业务系统后端 接口鉴权 校验前端携带的业务 token,无 Cookie 校验
后端提供的服务
  • 认证中心:登录 / 登出 / 授权码生成 / 授权码校验接口;
  • 业务系统:授权码兑换接口、业务 token 校验接口、统一鉴权拦截器;
  • 跨域配置:允许业务系统前端跨域调用认证中心接口(CORS 配置);
  • 安全策略:Cookie 的 HttpOnly/Secure/SameSite 配置,防止 CSRF/XSS。

3. 运维:核心职责是「域名 / 网络配置 + 安全策略 + 部署运维」

核心职责
职责项 具体操作 技术实现
域名规划 独立的认证中心域名(如sso.yourdomain.com),与业务系统域名隔离 DNS 解析配置
HTTPS 配置 所有域名强制 HTTPS(Cookie 的 Secure 属性要求) Nginx 配置 + SSL 证书部署
跨域配置 Nginx 层面配置 CORS,允许业务系统跨域访问认证中心 Nginx 的 add_header Access-Control-*
Cookie 安全配置 确保认证中心 Cookie 仅在本域名生效,禁止跨域携带 Nginx / 后端双重配置 Cookie 属性
部署架构 认证中心服务高可用部署,业务系统与认证中心网络互通 负载均衡(LB)+ 集群部署
日志监控 监控认证中心登录 / 登出日志,排查跨域认证问题 ELK/Prometheus + Grafana
运维提供的服务
  • 独立的 SSO 认证中心域名及 SSL 证书部署;
  • 各业务系统域名与认证中心域名的 DNS 解析;
  • Nginx 层面的 HTTPS 强制跳转、CORS 配置、Cookie 安全配置;
  • 认证中心服务的高可用部署(集群 / 负载均衡);
  • 日志监控系统(认证中心登录日志、跨域访问日志);
  • 安全策略配置(WAF 防护、接口限流、Cookie 防篡改)。

三、关键安全注意事项

  1. 认证中心 Cookie 必须配置:HttpOnly=true(防止 XSS)、Secure=true(仅 HTTPS)、SameSite=Strict(禁止跨域携带);
  2. 授权码必须是一次性、短期有效(如 5 分钟),防止复用;
  3. 业务系统临时 token 建议短期有效(如 2 小时),前端定期静默刷新(调用业务后端刷新接口,再调用认证中心校验 sso_token);
  4. 所有接口必须 HTTPS,防止 token 明文传输。

总结

  1. 前端(Vue3) :核心是「无 Cookie 登录态管理」,通过路由守卫跳转认证中心,解析授权码兑换临时 token,接口请求携带 token(Header);
  2. 后端:认证中心负责生成 sso_token 并存储至自身 Cookie,业务系统负责校验授权码、生成业务临时 token;
  3. 运维:核心是域名隔离、HTTPS 配置、Cookie 安全策略,确保仅认证中心存储 Cookie,杜绝跨域 Cookie 风险。
相关推荐
Listen·Rain32 分钟前
Vue3:setup详解
前端·javascript·vue.js
Patrick_Wilson1 小时前
修好 bug 只是开始:一次由监控需求反向重构日志结构的复盘
前端·监控·数据可视化
kyriewen2 小时前
面试官让我优化一个卡死的表格,我打开 Claude 五秒重写,他放下咖啡问我要不要来当组长
前端·javascript·面试
小粉粉hhh2 小时前
React(二)——dom、组件间通信、useEffect
前端·javascript·react.js
Csvn2 小时前
🤖 AI 生成前端代码的 5 个典型翻车现场及修复指南
前端
IT_陈寒3 小时前
SpringBoot自动装配坑了我一天,原来问题出在这
前端·人工智能·后端
索西引擎4 小时前
【React】key 属性:协调算法中的元素标识机制与最佳实践
前端·javascript·react.js
只会cv的前端攻城狮5 小时前
动态组件架构设计:从配置到事件驱动全链路解析
前端·vue.js
飞天狗5 小时前
Next.js 16 App Router 实战:服务端组件与流式渲染
前端·next.js
OpenTiny社区5 小时前
TinyEngine 2.11版本发布:AI 进一步融入画布,Vue 工程可一键转DSL
前端·vue.js·github