单点登录前端，单点登录前端实现代码

欧气 2024年10月01日 10:14 1 0

本文目录导读：

单点登录概述
前端单点登录的技术选型
前端实现单点登录的流程
跨域单点登录的前端处理
单点登录的安全考量
用户体验优化

单点登录（SSO）前端实现全解析

单点登录概述

单点登录（Single Sign - On，SSO）是一种身份验证机制，它允许用户使用一组凭据（如用户名和密码）登录到多个相关的应用程序或系统中，在前端开发中，实现单点登录涉及到与后端的交互、安全机制的处理以及用户体验的优化等多个方面。

前端单点登录的技术选型

1、Cookie

- Cookie是一种常见的在客户端存储数据的方式，在单点登录场景下，可以利用Cookie来存储用户的登录状态信息，当用户在单点登录服务器成功登录后，单点登录服务器可以在响应中设置一个包含用户标识等信息的Cookie，这个Cookie可以被设置为跨域共享（需要在服务器端进行相关的跨域配置，如设置Access - Control - Allow - Origin等头部信息）。

单点登录前端，单点登录前端实现代码

图片来源于网络，如有侵权联系删除

- 在前端应用中，后续的请求可以带上这个Cookie，但是要注意Cookie的安全性，例如设置HttpOnly属性来防止JavaScript脚本访问Cookie中的敏感信息，防止跨站脚本攻击（XSS）。

2、LocalStorage和SessionStorage

- LocalStorage和SessionStorage是HTML5提供的在浏览器端存储数据的新方式，LocalStorage存储的数据是持久化的，即使浏览器关闭后再次打开仍然存在；而SessionStorage中的数据在浏览器会话结束（如关闭浏览器标签页）时就会被清除。

- 在单点登录中，可以将用户登录后的一些非敏感信息（如用户的显示名称、用户角色等）存储在LocalStorage或SessionStorage中，方便在前端应用中快速获取用户相关信息而无需频繁向服务器请求，在一个多模块的前端应用中，不同的模块可以直接从本地存储中获取用户角色信息来决定是否显示某些功能按钮。

前端实现单点登录的流程

1、登录入口

- 在前端应用中，通常会有一个登录页面或者登录入口按钮，当用户点击登录时，前端会将用户输入的用户名和密码（或者其他认证方式所需的信息）发送到单点登录服务器，这可以通过XMLHttpRequest（XHR）或者更现代的fetch API来实现。

- 使用fetch API的代码如下：

const loginForm = document.getElementById('login - form');
loginForm.addEventListener('submit', async (e) => {
    e.preventDefault();
    const username = document.getElementById('username').value;
    const password = document.getElementById('password').value;
    const response = await fetch('https://sso - server.com/login', {
        method: 'POST',
        headers: {
            'Content - Type': 'application/json'
        },
        body: JSON.stringify({ username, password })
    });
    const data = await response.json();
    if (data.success) {
        // 登录成功后的处理
    } else {
        // 登录失败的提示
    }
});

2、处理登录成功响应

- 当单点登录服务器验证用户信息成功后，会返回一个成功的响应，在前端，需要处理这个响应并存储相关的登录状态信息。

- 如果是使用Cookie存储登录状态，浏览器会自动处理服务器返回的Cookie设置，如果是使用LocalStorage或SessionStorage，可以这样做：

单点登录前端，单点登录前端实现代码

图片来源于网络，如有侵权联系删除

if (data.success) {
    localStorage.setItem('user - name', data.user.name);
    localStorage.setItem('user - role', data.user.role);
    // 跳转到应用的主页面
    window.location.href = '/dashboard';
}

3、访问其他受保护资源

- 在前端应用中，当用户访问其他受保护的资源（如需要登录才能查看的页面或执行的操作）时，需要检查用户的登录状态。

- 可以在页面加载时或者在执行相关操作之前检查LocalStorage或Cookie中的登录状态信息。

window.addEventListener('load', () => {
    const userName = localStorage.getItem('user - name');
    if (!userName) {
        // 如果没有登录，跳转到登录页面
        window.location.href = '/login';
    }
});

跨域单点登录的前端处理

1、JSONP（已逐渐被弃用，但在某些遗留系统中可能仍有使用）

- JSONP是一种通过<script>标签来实现跨域数据获取的方式，在单点登录场景下，如果单点登录服务器支持JSONP，前端可以使用JSONP来获取登录状态信息。

<script type="text/javascript">
    function handleLoginStatus(response) {
        if (response.success) {
            // 处理登录状态
        } else {
            // 处理登录失败情况
        }
    }
</script>
<script type="text/javascript" src="https://sso - server.com/login - status?callback = handleLoginStatus"></script>

2、CORS（跨域资源共享）

- 现代的前端开发中，CORS是实现跨域单点登录的更安全和规范的方式，在服务器端配置好CORS允许的源、请求方法等信息后，前端可以像普通的同域请求一样使用fetch或XHR进行跨域单点登录相关的操作。