单点登录（SSO）前端怎么做

单点登录（Single Sign-On，简称SSO）是一种用户认证过程，使得用户在多个相关但独立的系统中，只需登录一次即可访问所有相关系统。这种机制不仅提高了用户体验，而且简化了用户的身份管理。在前端实现SSO，会涉及到多个方面，包括用户认证、token管理、跨域问题等。以下将详细介绍单点登录在前端的实现方法，并提供相应的代码示例。

1. SSO的工作流程

单点登录的工作流程一般如下：

1. 用户访问需要认证的应用（如应用A）。
2. 应用A检查用户是否已登录。如果未登录，重定向用户到认证服务器。
3. 用户在认证服务器输入凭证（如用户名和密码）。
4. 认证服务器验证凭证后，生成一个token，并将其返回给应用A。
5. 应用A使用token获取用户信息，并完成登录过程。
6. 在访问另一个应用（如应用B）时，应用B会检查token，并通过认证服务器验证其合法性。

2. 前端实现步骤

2.1. 重定向到认证服务器

当用户访问保护资源的页面时，我们需要判断用户是否已登录。如果未登录，则重定向到统一认证服务器。

function checkLogin() {
    const token = localStorage.getItem('authToken'); // 从localStorage获取token
    if (!token) {
        // 如果token不存在，重定向到认证服务器
        window.location.href = 'https://auth.example.com/login';
    } else {
        // 验证token的有效性
        validateToken(token);
    }
}

2.2. 验证token有效性

在前端，可以通过发送请求到认证服务器来验证token的有效性。如果token有效，则获取用户信息。

async function validateToken(token) {
    try {
        const response = await fetch('https://auth.example.com/validate', {
            method: 'POST',
            headers: {
                'Authorization': `Bearer ${token}`,
                'Content-Type': 'application/json'
            }
        });

        if (response.ok) {
            const userData = await response.json();
            console.log('用户信息:', userData);
            // 进行用户登录逻辑，比如存储用户信息，导航到主页等
        } else {
            // token无效，重定向到登录页
            window.location.href = 'https://auth.example.com/login';
        }
    } catch (error) {
        console.error('验证token时出错:', error);
        // 出现异常时，重定向到登录页
        window.location.href = 'https://auth.example.com/login';
    }
}

2.3. 处理登录逻辑

当用户在认证服务器成功登录后，认证服务器会将token返回给前端应用。我们可以在前端应用中存储token，以供后续请求使用。

// 登录函数示例
async function login(username, password) {
    try {
        const response = await fetch('https://auth.example.com/login', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({ username, password })
        });

        if (response.ok) {
            const data = await response.json();
            // 登录成功，存储token
            localStorage.setItem('authToken', data.token);
            window.location.href = '/home'; // 重定向到主页
        } else {
            console.error('登录失败');
        }
    } catch (error) {
        console.error('登录请求出错:', error);
    }
}

3. 安全性考虑

在实现SSO的前端部分时，需考虑以下安全性问题：

1. HTTPS: 确保所有请求使用HTTPS，防止中间人攻击。
2. Token存储: 不建议将token存储在localStorage中，而是使用HttpOnly Cookie，可以增加安全性。
3. Token过期: 在token过期后，及时处理用户重定向到登录页面。

4. 总结

单点登录可以极大提升用户体验，但在前端实现时需要考虑多个方面，包括认证、token管理和安全性等。通过上述代码示例，您可以初步了解如何在前端实现SSO。希望这能为您的项目提供帮助。