“前端单点登录（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（如：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 通知同步登录 |
| 登出同步 | 通知所有系统清除登录状态（可轮询或广播） |
