从前端出发，讲解简单服务器登录逻辑

背景

• 前端通常是一个 SPA（React/Vue/Angular），通过 Ajax/Fetch 调用后端 API。
• 登录需要校验用户身份，并维持会话状态，保证后续请求都是认证过的用户。
• 常见两种方式：Cookie-Session 或 Token（JWT、SessionId） 。

登录完整流程

1️⃣ 用户输入

用户在前端页面填写用户名/密码并点击登录按钮。

2️⃣ 前端发送请求

前端将用户名/密码（通常加密/HTTPS传输）通过 POST 请求发给后端，例如：

fetch('/api/login', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ username, password })
})

3️⃣ 后端验证

服务器拿到用户名/密码：

• 查询数据库（MySQL/Redis）验证账户是否存在、密码是否正确。

• 如果正确，生成一个身份凭证：

  • 基于Session：在服务器创建一个 Session 并返回 SessionId，SessionId 通常放在 Cookie 里。
  • 基于Token：生成 JWT/自定义Token，直接返回给前端。

4️⃣ 前端保存凭证

• Cookie：浏览器自动保存服务器设置的 Cookie；后续请求自动携带 Cookie。
• Token：前端自己存储在 localStorage / sessionStorage / 内存中；每次请求在 Authorization header 里带上 Bearer token。

5️⃣ 后续请求携带凭证

前端在调用其他 API 时，把 token 或 cookie 带上：

fetch('/api/userinfo', {
  headers: { 'Authorization': `Bearer ${token}` }
})

6️⃣ 服务器校验凭证

• 服务器检查 Cookie/Token 是否有效。
• 如果有效，返回业务数据；无效则返回 401（未授权），前端可以跳转到登录页。

服务器端（简述）

路由

// Node+Express例子
app.post('/api/login', (req,res)=>{
  // 1.校验用户名密码
  // 2.生成token或session
  res.json({ token })
})

app.get('/api/userinfo', authMiddleware, (req,res)=>{
  res.json({ user: req.user })
})

中间件 authMiddleware

• 检查请求头里是否有 token 或 cookie。
• 验证合法性后才放行到后续接口。

存储

• 用户数据存数据库（MySQL）。
• Token可以存 Redis（如果想做服务端可控的失效管理）。

总结

1. 前端：提交用户名/密码 → 保存后端返回的 Token/Cookie → 请求其他接口时带上凭证。
2. 后端：验证用户名/密码 → 返回 Token/SessionId → 对后续请求做鉴权。