https://iamxurulin.github.io/tags/%E6%9E%B6%E6%9E%84/ Recent content in 架构 on Coder_Studio Hugo -- gohugo.io en-us iamxurulin Sun, 05 Apr 2026 17:35:33 +0000 https://iamxurulin.github.io/p/%E5%89%8D%E5%90%8E%E7%AB%AF%E5%88%86%E7%A6%BB-%E5%BE%AE%E6%9C%8D%E5%8A%A1%E6%9E%B6%E6%9E%84%E4%B8%8B%E7%9A%84%E7%94%A8%E6%88%B7%E8%AE%A4%E8%AF%81/ Tue, 17 Mar 2026 19:38:35 +0000 https://iamxurulin.github.io/p/%E5%89%8D%E5%90%8E%E7%AB%AF%E5%88%86%E7%A6%BB-%E5%BE%AE%E6%9C%8D%E5%8A%A1%E6%9E%B6%E6%9E%84%E4%B8%8B%E7%9A%84%E7%94%A8%E6%88%B7%E8%AE%A4%E8%AF%81/ <p>先明确一些核心组件：</p> <table> <thead> <tr> <th>组件</th> <th>作用</th> </tr> </thead> <tbody> <tr> <td>前端</td> <td>页面展示、用户交互、存储Token</td> </tr> <tr> <td>API网关</td> <td>统一入口、路由转发、Token校验</td> </tr> <tr> <td>认证中心</td> <td>用户登录验证、生成/刷新Token</td> </tr> <tr> <td>微服务</td> <td>处理业务逻辑、获取用户信息</td> </tr> <tr> <td>数据库</td> <td>存储用户账号密码、权限信息</td> </tr> </tbody> </table> <p>当时面试官跟我说，你可以从前端打开一个页面开始讲。</p> <p>那我们就举个例子：</p> <p>以用户打开一个电商网站首页➡️跳转登录➡️输入账号密码登录➡️携带Token请求商品列表为例，说一下这个完整的流程。</p> <h3 id="1前端打开页面检查本地是否有token">1.前端打开页面，检查本地是否有Token </h3><p>用户在浏览器输入 <code>https://www.example.com</code>，前端代码首先检查<strong>本地存储</strong>中是否存在有效的Token。</p> <h3 id="2没有token前端跳转登录页用户输入账号密码">2.没有Token，前端跳转登录页，用户输入账号密码 </h3><p>如果本地没有Token，前端路由跳转到 <code>/login</code> 登录页，用户输入账号和密码，点击【登录】按钮。</p> <h3 id="3前端发送登录请求到api网关">3.前端发送登录请求到API网关 </h3><p>前端将账号密码封装成POST请求，发送到API网关。</p> <p>需要注意的是：前端不直接请求认证中心，所有请求都走网关统一入口。</p> <h3 id="4api网关转发登录请求到认证中心">4.API网关转发登录请求到认证中心 </h3><p>API网关收到 <code>/auth/login</code> 请求，根据路由规则，将请求转发到认证中心服务。</p> <h3 id="5认证中心验证用户信息生成jwt-token">5.认证中心验证用户信息，生成JWT Token </h3><p>认证中心做以下3件事：</p> <ol> <li>从数据库查询用户信息，验证账号密码是否正确；</li> <li>验证通过后，生成 JWT Token（分为 Access Token 和 Refresh Token）；</li> <li>将 Token 返回给前端。</li> </ol> <p>那什么是JWT呢？</p> <p>JWT（JSON Web Token）是一种无状态的Token，由三部分组成，用 <code>.</code> 分隔：</p> <ul> <li><strong>Header</strong>：头部，存算法和类型；</li> <li><strong>Payload</strong>：载荷，存用户信息（比如userId、username、过期时间）；</li> <li><strong>Signature</strong>：签名，用密钥对Header和Payload签名，防止Token被篡改。</li> </ul> <h3 id="6前端收到token存储到本地">6.前端收到Token，存储到本地 </h3><p>前端收到认证中心返回的 <code>access_token</code> 和 <code>refresh_token</code>，存到本地存储中。</p> <h3 id="7前端携带token请求业务接口">7.前端携带Token请求业务接口 </h3><p>用户登录成功后，前端请求商品列表接口，在请求头 <code>Authorization</code> 中携带 <code>Bearer Token</code>。</p> <p>Bearer 这个单词的意思是“持票人”、“持有者”。</p> <p>Bearer Token 就是：“谁持有这个 Token，谁就是合法的访问者，服务器就认谁”。</p> <h3 id="8api网关校验token">8.API网关校验Token </h3><p>API网关收到 <code>/product/list</code> 请求，通过全局过滤器校验Token的有效性：</p> <ol> <li>从请求头 <code>Authorization</code> 中取出Token；</li> <li>验证Token的签名是否正确；</li> <li>验证Token是否过期；</li> <li>校验通过后，将用户信息（比如userId）放入请求头，转发给微服务；</li> <li>如果校验失败，直接返回401未授权。</li> </ol> <h3 id="9微服务获取用户信息处理业务逻辑">9.微服务获取用户信息，处理业务逻辑 </h3><p>微服务（比如商品服务）收到网关转发的请求，从请求头 <code>X-User-Id</code> 中取出userId，处理业务逻辑（比如查询该用户的商品列表）。</p> <h3 id="10token过期前端用refresh-token刷新">10.Token过期，前端用Refresh Token刷新 </h3><p>Access Token有效期比较短（比如只有2小时），过期后前端请求会收到401；</p> <p>此时前端不用让用户重新登录，而是用<strong>Refresh Token</strong>去认证中心刷新Access Token。</p>