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