SSO单点登录原理解析：前端工程师必须知道的认证逻辑

在多系统协作的企业级应用中，单点登录（SSO, Single Sign-On）是提升用户体验和安全性的关键技术。本文结合实际前端实现代码和 SSO 认证中心的原理，详细解析如何在前端项目实现单点登录。

一、业务背景与需求

随着团队业务系统和业务组的划分逐渐增多，用户频繁切换系统时需要重复登录，既影响体验，也带来安全隐患。SSO 认证中心的引入，旨在实现“只需登录一次，畅行所有系统”，统一用户身份认证，简化登录流程。

二、SSO 认证中心原理

认证中心独立部署：
- 认证中心是专门负责处理登录请求的独立 Web 服务。
统一登录与 Token 下发：
- 用户在认证中心登录，认证中心记录登录状态，并将 Token 写入自己的 Cookie（应用系统无法访问）。
应用系统检测 Token：
- 应用系统检查当前请求是否有 Token，无则跳转认证中心。
- 跳转时会自动带上认证中心的 Cookie，认证中心可判断用户是否已登录。
认证中心回跳与 Token 传递：
- 未登录则展示登录页，用户需要登录（通过手机号确保身份唯一性）。
- 已登录则生成 Token 拼接到目标 URL，回传给应用系统。
Token 校验与本地登录态维护：
- 应用系统拿到 Token 后，需向认证中心校验合法性。
- 校验通过后，应用系统将 Token 写入自己的 Cookie，后续访问自动带上 Token，无需再跳认证中心。

三、前端 SSO 集成核心代码解析


const getCookie = (key) => {
    const cookie = document.cookie;
    if (!cookie) return "";
  	// 此处为解析自定义的cookie参数规范 
    const cookieArr = cookie.split(";");
    const cookieMap = new Map();
    cookieArr.forEach(item => {
        const itemArr = item.split("=");
        const keyItem = itemArr[0].trim();
        const valueItem = itemArr[1].trim();
        cookieMap.set(keyItem, valueItem);
    });
    return cookieMap.has(key) ? cookieMap.get(key) : "";
}

解析本地 Cookie，便于后续校验登录态和获取用户信息。

2. 跳转认证中心逻辑


const jumpToServide = () => {
    localStorage.removeItem('vToken');
    document.cookie = '';
    const sevice = window.VUE_APP_CAS_SERVICE; // 应用系统地址
    const serviceUrl = encodeURIComponent(sevice);
    window.location.href = `${window.VUE_APP_CAS_BASE_URL(认证中心地址)}${serviceUrl}`;
}

当本地无有效 Token 或校验失败时，清理本地登录态并跳转认证中心。

3. SSO 初始化与登录流程


const init = (callback) => {
    const vToken = localStorage.getItem('vToken') || '';
    if (vToken) {
        callback && loginSuccess(callback);
        return;
    }
    const userId = getCookie('userid');
    if (userId) {
        // 校验 cookie 是否被篡改
        const user = getCookie('user');
        const ticket = getCookie('ticket');
        if (md5(urldecode(user) + 'f7185e908fbd8d3cd4fc867966bc0d4b') !== ticket) {
            console.error('error : 登录失败，请重新登录');
            jumpToServide();
            return;
        }
        $request({
            url: `/org/auth/login`,
            method: 'get',
            params: { thsId: userId }
        }).then((res) => {
            if (res.statusCode === 'ok') {
              localStorage.setItem('vToken', res);
                loginSuccess(callback);
            } else {
                console.error(`error : ${res}`);
                jumpToServide();
            }
        })
    } else {
        jumpToServide(); // 跳转认证中心
    }
};

优先检查本地 Token，有则直接放行。
若无 Token，则尝试用 Cookie 校验用户身份，防止被篡改。
校验通过后向后端发起登录请求，成功则执行回调，失败则跳转认证中心。

4. 登录成功回调


function loginSuccess(callback) {
    callback(); // 例如开始创建vue实例，执行页面渲染逻辑
}

登录成功后执行业务回调，解耦登录与业务逻辑。

四、SSO 认证中心流程总结

用户访问应用系统，系统检测无 Token，自动跳转认证中心。
认证中心判断用户是否已登录，未登录则展示登录页，已登录则生成 Token 回跳。
应用系统拿到 Token 后，向认证中心校验合法性，校验通过后本地记录登录态。
后续访问自动带上 Token，无需再次跳转认证中心。

五、评价与实践建议

优点

用户体验好：只需登录一次，畅行所有系统。
安全性高：Token 校验与 Cookie 隔离，防止伪造和跨系统窃取。
易于集成：前端只需少量代码即可接入，认证中心独立维护。

注意事项

Token 有效期与刷新机制需与后端协同设计。
认证中心与各应用系统的 Cookie 域名需合理隔离。
前端需防范 XSS，避免 Token 泄露。

六、结语

单点登录是现代企业级系统不可或缺的基础设施。通过认证中心与前端协作，可以极大提升用户体验与系统安全。希望本文的实战解析能为你的项目落地 SSO 提供参考。

posted @ 2025-06-07 10:33 Justus- 阅读(304) 评论(0) 收藏举报

刷新页面返回顶部

Justus