登錄流程完整小白解析（小程序 & 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
小程序直接單token就可以，每次請求都攜帶，請求過去過期了，返回401，在請求登錄獲取code,獲取新的就可以了，web因為要輸入賬戶密碼所以，得搞雙token，不然不操作一會就重新登陸，但是單token也行設置一小時不登錄退出即可
