前端单点登录
“前端单点登录（SSO, Single Sign-On）”是指在多个系统之间共享用户登录状态，使用户只需登录一次，就可以在多个子系统中使用同一身份访问资源，无需重复登录。
以下是一个典型的前端单点登录方案的介绍和实现思路：
🔧 一、前端单点登录的核心流程
以一个公司内多个前端系统为例（如：系统 A、系统 B），通过统一的登录中心进行身份认证。
🌐 基础参与者：
-
登录认证中心（SSO Server）
-
子系统 A/B/C（SSO Client）
-
浏览器（前端运行环境）
🔁 登录流程简要图解：
[用户访问子系统 A]↓
[未登录 → 重定向到 SSO 登录中心]↓
[SSO 登录成功 → 返回带 Token 的跳转链接给子系统 A]↓
[子系统 A 用 Token 向 SSO 验证身份]↓
[身份验证成功 → 创建子系统 A 的本地会话]↓
[访问子系统 B → 检查登录状态 → 同样走一遍验证流程 → 免登录]
🛠️ 二、前端常见实现方案
✅ 1. 基于 Cookie 的方式（适合统一域名）
同一主域（如
a.example.com和b.example.com）可共享顶级域名 Cookie。
-
设置 SSO Server 设置
Set-Cookie: token=xxx; Domain=.example.com; Path=/ -
子系统读取 Cookie 并根据 token 验证身份
优点：实现简单，不需要 Token 手动传输
缺点：只能适用于同一主域，存在跨域限制
✅ 2. 基于 Token（如 JWT）的方式（适合不同域名）
-
SSO 登录后生成
access_token（JWT 或 sessionId） -
重定向到客户端系统并携带 Token（如：
https://system-a.com?token=abc123） -
客户端拿 token 请求认证接口，验证并存入 localStorage / sessionStorage
-
后续所有请求都带上这个 token（通常放到
Authorization头）
示例前端逻辑：
// 获取 URL 中的 token
const urlParams = new URLSearchParams(window.location.search);
const token = urlParams.get('token');if (token) {localStorage.setItem('access_token', token);// 可调用验证接口确认有效性
} else {// 没有 token，跳转到 SSO 登录页window.location.href = `https://sso.example.com/login?redirect=${encodeURIComponent(location.href)}`;
}
🧠 三、SSO 实现注意点
💡 登录中心要支持：
-
登录接口，支持用户输入账号密码
-
校验 Token 的接口（给客户端调用验证用）
-
Token 签发（JWT 或 sessionId）
-
Token 刷新机制（可选）
🔒 安全注意：
-
Token 要有时效（过期时间）
-
HTTPS 传输
-
Token 不应泄露在 URL 中太久（可用
history.replaceState清除）
🌍 四、前端开发建议
| 项目 | 建议 |
|---|---|
| 登录状态缓存 | localStorage / Cookie / memory |
| Token 校验失败 | 自动跳转到 SSO 登录页 |
| 多系统切换 | 使用 iframe 或 postMessage 通知同步登录 |
| 登出同步 | 通知所有系统清除登录状态（可轮询或广播） |