前端面试题7（单点登录）

如何实现单点登录

单点登录（Single Sign-On，简称SSO）是一种允许用户在多个应用系统中只需登录一次，就可以访问所有相互信任的应用系统的认证技术。实现前端单点登录主要依赖于后端的支持和一些特定的协议，如OAuth、OpenID Connect等。下面是一个基于Cookie和Session的简单前端实现思路，以及如何与后端交互的说明。请注意，这只是一个简化的示例，并未涵盖所有安全考虑。

前端实现步骤

1. 登录验证:
   用户在登录页面输入用户名和密码，前端将这些凭据通过HTTPS发送到后端认证服务。

// 假设使用fetch API发送登录请求
async function login(username, password) {
    const response = await fetch('/api/login', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify({ username, password }),
    });

    if (response.ok) {
        // 登录成功，重定向到首页或其他页面
        window.location.href = '/home';
    } else {
        // 处理错误情况
    }
}

2. 设置Token或Cookie:
   后端验证成功后，会返回一个Token（JWT常见）或者设置一个认证Cookie（包含用户信息或Token），前端需要保存这个Token或确保浏览器接收了这个Cookie。

3. 自动登录检查:
   在其他需要登录状态的页面，前端首先检查是否有有效的Token（通常存储在LocalStorage或Cookie中）或通过API请求检查Session状态。

function checkAuth() {
    const token = localStorage.getItem('authToken') || getCookie('sessionToken');
    if (token) {
        // Token存在，认为已登录
        return true;
    } else {
        // 未找到Token，重定向到登录页
        window.location.href = '/login';
        return false;
    }
}

4. 跨域资源共享(CORS):
   如果前端和后端部署在不同的域名下，需要处理CORS问题，确保Cookie能够正确传递。

后端实现要点

• 统一认证服务: 需要有一个中心认证服务器，负责验证用户凭据并发放Token或设置Session。
• Token或Session管理: 生成的Token应具有时效性，并且需要有效管理Session，包括创建、验证和过期处理。
• 跨域策略: 后端需要配置CORS策略，允许特定源的前端应用访问认证相关的API，并允许Cookie随请求发送。
• 资源保护: 所有需要鉴权的API都应该检查请求中携带的Token或Session的有效性。

安全注意事项

• 使用HTTPS来加密传输数据，防止中间人攻击。
• 对Token进行适当的安全设计，比如使用JWT时应包含签发时间、过期时间，并使用密钥签名。
• Cookie应设置HttpOnly属性以防止XSS攻击，并根据需要设置SameSite属性来限制跨站请求。

以上是前端参与单点登录实现的一个基本框架，实际应用中还需结合具体业务场景和安全要求进行详细设计。