登录流程完整小白解析（小程序 & Web）

在开发中，登录是每个系统最基础的功能。为了让小白也能理解，我们用通俗类比和流程讲解 小程序登录、Web 登录、Token 刷新、安全存储等整个过程。

1️⃣ 小程序登录流程（小白理解版）

前提条件

用户必须使用 微信小程序
后端能存储用户信息并生成登录凭证（token/session）

类比：用户手机是身份证，后端生成登录态就像给用户发门禁卡。

流程步骤

前端调用 wx.login() 获取 code

wx.login({success(res) {if(res.code) {// 将 code 发送给后端}}
})
code 是临时凭证，只能交给后端换 token前端不能直接用它拿手机号或者用户信息类比：code = 临时通行证，交给门卫换门禁卡后端换取 session_key + openid后端调用微信接口得到 session_key（解密用）和 openid（用户唯一标识）保存到数据库，生成自己的 token 返回前端类比：openid = 用户身份证号，token = 门禁卡前端保存 token 并请求接口token 存储在小程序本地 storage每次请求接口都带上 tokentoken 过期后可自动重新登录类比：门禁卡过期，自动去门卫换新卡，用户几乎无感

2️⃣ Web 登录流程（小白理解版）
前提条件
用户用浏览器访问 Web 系统

后端有用户账号数据库

后端能生成短期 Access Token 和长期 Refresh Token

流程步骤
用户输入账号 + 密码

前端 HTTPS 发送给后端

后端验证账号密码（密码必须哈希 + 加盐存储）

类比：账号密码 = 身份证 + 密码锁

后端生成登录凭证

Access Token（短期有效，例 15 分钟）

Refresh Token（长期有效，例 30 天）

返回给前端存储（HttpOnly Cookie 或内存）

类比：Access Token = 临时门禁卡
Refresh Token = 长期凭证

前端请求接口

请求带 Access Token

Access Token 过期 → 后端返回 401

使用 Refresh Token 刷新 Access Token

javascript
复制代码
fetch(‘/refresh-token’, {
method: ‘POST’,
credentials: ‘include’ // 自动带上 HttpOnly Cookie
})
.then(res => res.json())
.then(data => {
console.log(‘新的 Access Token:’, data.accessToken);
})
后端验证 Refresh Token：

有效 → 返回新的 Access Token

过期 → 用户必须重新登录

类比：门禁卡失效，用长期凭证换新门禁卡；长期凭证过期 → 重新办理身份证

3️⃣ Token 存储方式（小白版）
存储方式优点风险小白理解
Cookie (HttpOnly) 自动带请求，JS 不能读取可能被 CSRF 攻击，需要防护门禁卡放在门卫柜子里，别人拿不到，很安全
localStorage 前端可直接读取 XSS 风险高，脚本可访问门禁卡放口袋里，别人可能偷看
sessionStorage 页面关闭自动清空 XSS 风险高，无法跨页面门禁卡只在当前页面有效，关闭就没了

建议：Access Token 尽量存在内存或 HttpOnly Cookie，避免 localStorage 存敏感 token

4️⃣ 登录安全小贴士（小白理解）
密码安全

哈希 + 加盐存储

即便数据库泄露，也无法轻易破解密码

类比：把密码变成只有后端能解的密码锁

增加验证

可以加验证码或者二步验证

提高安全性，防止别人盗号

小程序体验

自动登录，不用每次输入账号密码

微信授权安全又方便

Web 体验

双 token 机制（Access + Refresh）

用户几乎感觉不到刷新过程

小白理解：

安全和体验要平衡

短期 token 保证安全

长期 token 保证用户不用频繁登录

5️⃣ 总结（小白理解）
小程序：wx.login → 后端换 token → 前端存 token → 自动续期

Web：账号密码 → 后端生成 Access + Refresh → 前端存储 → Access Token 过期 → Refresh Token 自动换新

核心：前端拿凭证 → 后端验证 → 生成登录态 → 前端请求接口

用户体验流畅，数据安全

类比回顾：

Access Token = 临时门禁卡

Refresh Token = 长期凭证

session_key = 后端钥匙

用户感觉不到加密解密和刷新过程，安全又顺畅

flowchart TD
subgraph 小程序登录
A1[用户点击登录] --> B1[调用 wx.login() 获取 code]
B1 --> C1[前端发送 code 给后端]
C1 --> D1[后端用 code 换取 session_key + openid]
D1 --> E1[生成自定义 token 返回前端]
E1 --> F1[前端存储 token (storage)]
F1 --> G1[前端请求接口，带 token]
G1 --> H1{token 过期？}
H1 – 否 --> I1[接口返回数据，用户看到正常信息]
H1 – 是 --> J1[自动重新登录获取新 token]
J1 --> F1
end

subgraph Web 登录A2[用户输入账号+密码] --> B2[前端发送给后端]B2 --> C2[后端验证账号密码]C2 --> D2[生成 Access Token + Refresh Token 返回前端]D2 --> E2[前端存储 Access Token (内存/HttpOnly Cookie)]D2 --> F2[前端存储 Refresh Token (HttpOnly Cookie)]E2 --> G2[前端请求接口，带 Access Token]G2 --> H2{Access Token 过期？}H2 -- 否 --> I2[接口返回数据，用户看到正常信息]H2 -- 是 --> J2[前端用 Refresh Token 请求刷新接口]J2 --> K2{Refresh Token 过期？}K2 -- 否 --> L2[后端返回新 Access Token]L2 --> E2K2 -- 是 --> M2[用户必须重新登录]M2 --> A2
endstyle 小程序登录 fill:#E8F0FE,stroke:#1E90FF,stroke-width:1px
style Web 登录 fill:#FFE8E8,stroke:#FF4500,stroke-width:1px