单点登录(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 风险。
相关推荐
鹏多多3 小时前
移动端H5项目,还需要react-fastclick解决300ms点击延迟吗?
前端·javascript·react.js
serioyaoyao3 小时前
上万级文件一起可视化,怎么办?答案是基于 ParaView 的远程可视化
前端
万少3 小时前
端云一体 一天开发的元服务-奇趣故事匣经验分享
前端·ai编程·harmonyos
WindrunnerMax3 小时前
从零实现富文本编辑器#11-Immutable状态维护与增量渲染
前端·架构·前端框架
不想秃头的程序员4 小时前
Vue3 封装 Axios 实战:从基础到生产级,新手也能秒上手
前端·javascript·面试
数研小生4 小时前
亚马逊商品列表API详解
前端·数据库·python·pandas
你听得到114 小时前
我彻底搞懂了 SSE,原来流式响应效果还能这么玩的?(附 JS/Dart 双端实战)
前端·面试·github
不倒翁玩偶4 小时前
npm : 无法将“npm”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。请检查名称的拼写,如果包括路径,请确保路径正确,然后再试一次。
前端·npm·node.js