EnlightenCode

前端登录方案全解析 🌟 ​

1. Cookie + Session 登录 🍪 ​

1.1 基本概念 ​

  • HTTP 协议是无状态的，每次请求都是独立的
  • Cookie 是存储在客户端的小型文本数据
  • Session 是服务器端的会话存储机制

1.2 工作流程 ⚙️ ​

  1. 用户登录提交账号密码
  2. 服务器验证通过后创建 SessionId
  3. 服务器通过 Set-Cookie 响应头将 SessionId 写入客户端 Cookie
  4. 后续请求自动携带 Cookie 实现身份验证

1.3 代码示例 ​

javascript
// 服务器端示例 (Express)
app.post('/login', (req, res) => {
    const { username, password } = req.body;
    if (验证通过) {
        req.session.userId = user.id; // 设置 Session
        res.cookie('sessionId', req.session.id, {
            httpOnly: true,
            secure: true,
            sameSite: 'strict'
            });
        res.json({ success: true });
    }
});

1.4 存在的问题 ⚠️ ​

  1. 服务器需存储大量 Session，增加服务器负载
  2. 集群环境下 Session 同步困难
  3. 容易遭受 CSRF 攻击

2. Token 登录 🎟️ ​

2.1 JWT (JSON Web Token) 实现 ​

  • Header: 声明加密算法
  • Payload: 存储用户信息
  • Signature: 签名确保数据完整性

2.2 工作流程 ⚙️ ​

  1. 用户登录成功后服务器生成 Token
  2. 客户端存储 Token（localStorage/内存）
  3. 请求时在 Authorization 头携带 Token

2.3 代码示例 ​

javascript
// 服务器端生成 JWT
const jwt = require('jsonwebtoken');
const token = jwt.sign(
  { userId: user.id },
  'secret_key',
  { expiresIn: '24h' }
);

// 前端使用
// 存储 Token
localStorage.setItem('token', token);

// API 请求
fetch('/api/data', {
  headers: {
    'Authorization': `Bearer ${localStorage.getItem('token')}`
  }
});

2.4 优势与注意事项 📝 ​

  • ✅ 服务器无状态，易于扩展
  • ✅ 可跨域使用
  • ⚠️ Token 无法主动废除
  • ⚠️ 需注意 Token 的安全存储

3. SSO 单点登录 🔑 ​

3.1 实现要点 ​

  • 统一的认证中心
  • 共享的登录状态
  • 多系统间的通信机制

3.2 最佳实践 💡 ​

  1. 使用 HTTPS 确保传输安全
  2. 实现统一的登出机制
  3. 注意 Cookie 的域名设置

3.3 示例流程图 ​

mermaid
sequenceDiagram
    用户->>系统A: 访问
    系统A->>SSO中心: 重定向
    SSO中心-->>用户: 登录页面
    用户->>SSO中心: 提交凭证
    SSO中心-->>系统A: 返回票据
    系统A->>用户: 登录成功

4. OAuth 第三方登录 🌐 ​

4.1 主流平台支持 ​

  • 微信 📱
  • GitHub 💻
  • Google 🔍
  • Facebook 👥

4.2 安全建议 🛡️ ​

  1. 务必在服务器端验证 OAuth 回调
  2. 使用 state 参数防止 CSRF
  3. 妥善保管 appId 和 secret
  4. 实现用户授权范围控制

4.3 示例代码 ​

javascript
// OAuth 2.0 回调处理
app.get('/oauth/callback', async (req, res) => {
  const { code, state } = req.query;
  
  // 验证 state 防止 CSRF
  if (state !== req.session.oauthState) {
    return res.status(403).json({ error: '非法请求' });
  }
  
  // 使用 code 换取 access_token
  const token = await getAccessToken(code);
  // 获取用户信息
  const userInfo = await getUserInfo(token);
  // 处理登录...
});

总结 📝 ​

选择合适的登录方案需要考虑：

  1. 系统规模和用户量
  2. 安全性要求
  3. 跨域需求
  4. 维护成本

建议：

  • 小型项目：Token + localStorage
  • 大型单体应用：Session + Cookie
  • 微服务架构：SSO + JWT
  • 开放平台：OAuth 2.0