[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"site-info":3,"article-categories":4,"article-4":25,"detail-hot":33,"article-related-4":74},null,{"list":5,"total":23},[6,11,15,19,22],{"id":7,"name":8,"sort":7,"createdAt":9,"updatedAt":9,"articleCount":10},1,"技术笔记","2026-11-12T18:30:42.000Z",16,{"id":12,"name":13,"sort":12,"createdAt":9,"updatedAt":9,"articleCount":14},2,"前端开发",38,{"id":16,"name":17,"sort":16,"createdAt":9,"updatedAt":9,"articleCount":18},3,"后端与架构",53,{"id":20,"name":21,"sort":20,"createdAt":9,"updatedAt":9,"articleCount":7},4,"产品与思考",{"id":23,"name":24,"sort":23,"createdAt":9,"updatedAt":9,"articleCount":12},5,"生活随笔",{"id":20,"title":26,"categoryId":16,"categoryName":17,"isTop":27,"viewCount":28,"createdAt":29,"updatedAt":30,"excerpt":31,"content":32},"从零设计一套多应用统一登录方案",false,993,"2026-11-04T18:30:42.000Z","2026-11-14T00:34:45.000Z","当项目从一个应用变成五六个应用时，登录就成了一件必须统一的事情。这篇笔记记录我们的 OAuth 2.0 授权码方案。 整体结构 认证中心：负责登录页、令牌签发、用户信息 业务应用：注册为 OAuth 客户端，拿到 clientId \u002F clientSecret API 服务：校验令牌，返回受保护资源 授权码流程 应用跳…","\u003Cp>当项目从一个应用变成五六个应用时，登录就成了一件必须统一的事情。这篇笔记记录我们的 OAuth 2.0 授权码方案。\u003C\u002Fp>\n\u003Ch2>整体结构\u003C\u002Fh2>\n\u003Cul>\n  \u003Cli>认证中心：负责登录页、令牌签发、用户信息\u003C\u002Fli>\n  \u003Cli>业务应用：注册为 OAuth 客户端，拿到 clientId \u002F clientSecret\u003C\u002Fli>\n  \u003Cli>API 服务：校验令牌，返回受保护资源\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Ch2>授权码流程\u003C\u002Fh2>\n\u003Col>\n  \u003Cli>应用跳转到认证中心，携带 clientId 与回调地址\u003C\u002Fli>\n  \u003Cli>用户在认证中心完成登录，回跳时带回授权码\u003C\u002Fli>\n  \u003Cli>应用用授权码换取访问令牌\u003C\u002Fli>\n  \u003Cli>之后请求携带令牌访问 API\u003C\u002Fli>\n\u003C\u002Fol>\n\u003Ch2>几个实践细节\u003C\u002Fh2>\n\u003Cp>回调地址必须白名单校验；授权码一次有效且有效期很短；刷新令牌需要轮换，旧令牌立即失效。\u003C\u002Fp>\n\u003Cblockquote>统一登录的难点不在协议，而在各应用对「会话」的理解不一致。\u003C\u002Fblockquote>\n\u003Cp>落地之后，新增一个应用的接入成本从两天降到半小时，这大概是最直观的收益。\u003C\u002Fp>",{"list":34,"total":72,"page":7,"pageSize":73},[35,42,48,54,60,66],{"id":36,"title":37,"categoryId":16,"categoryName":17,"isTop":27,"viewCount":38,"createdAt":39,"updatedAt":40,"excerpt":41},24,"深入理解 分布式锁实现",1865,"2026-11-02T03:30:42.000Z","2026-11-14T00:34:49.000Z","这是「分布式锁实现」主题下的一篇实践记录：深入理解 分布式锁实现。内容用于填充示例数据，方便浏览分页、搜索结果与文章详情。 为什么关注这个主题 在真实项目里，分布式锁实现往往不是孤立的知识点，而是和性能、稳定性、可维护性纠缠在一起。把它单独拿出来梳理一遍，遇到问题时才有判断依据。 实践要点 先明确目标与边界，再挑选方案…",{"id":16,"title":43,"categoryId":12,"categoryName":13,"isTop":27,"viewCount":44,"createdAt":45,"updatedAt":46,"excerpt":47},"前端性能优化：从首屏 3.2s 到 1.1s",1852,"2026-11-07T18:30:42.000Z","2026-11-14T00:34:48.000Z","上个月接手一个后台项目，首屏加载 3.2 秒，用户反馈「点开要等一下」。经过一周优化，稳定在 1.1 秒左右。下面按收益从高到低记录。 1. 先量化，再优化 优化之前必须建立基线。我使用的是 Lighthouse + 真实用户监控两条线：实验室数据看瓶颈，真实数据看用户感受。 2. 拆包与懒加载 路由级代码分割，首屏只…",{"id":49,"title":50,"categoryId":12,"categoryName":13,"isTop":27,"viewCount":51,"createdAt":52,"updatedAt":46,"excerpt":53},37,"微前端拆分方案 实践笔记",1846,"2026-10-22T20:30:42.000Z","这是「微前端拆分方案」主题下的一篇实践记录：微前端拆分方案 实践笔记。内容用于填充示例数据，方便浏览分页、搜索结果与文章详情。 为什么关注这个主题 在真实项目里，微前端拆分方案往往不是孤立的知识点，而是和性能、稳定性、可维护性纠缠在一起。把它单独拿出来梳理一遍，遇到问题时才有判断依据。 实践要点 先明确目标与边界，再挑…",{"id":55,"title":56,"categoryId":7,"categoryName":8,"isTop":27,"viewCount":57,"createdAt":58,"updatedAt":40,"excerpt":59},50,"单元测试实践 实践笔记",1826,"2026-10-12T13:30:42.000Z","这是「单元测试实践」主题下的一篇实践记录：单元测试实践 实践笔记。内容用于填充示例数据，方便浏览分页、搜索结果与文章详情。 为什么关注这个主题 在真实项目里，单元测试实践往往不是孤立的知识点，而是和性能、稳定性、可维护性纠缠在一起。把它单独拿出来梳理一遍，遇到问题时才有判断依据。 实践要点 先明确目标与边界，再挑选方案…",{"id":61,"title":62,"categoryId":16,"categoryName":17,"isTop":27,"viewCount":63,"createdAt":64,"updatedAt":46,"excerpt":65},63,"接口幂等设计 的十个细节",1805,"2026-10-02T06:30:42.000Z","这是「接口幂等设计」主题下的一篇实践记录：接口幂等设计 的十个细节。内容用于填充示例数据，方便浏览分页、搜索结果与文章详情。 为什么关注这个主题 在真实项目里，接口幂等设计往往不是孤立的知识点，而是和性能、稳定性、可维护性纠缠在一起。把它单独拿出来梳理一遍，遇到问题时才有判断依据。 实践要点 先明确目标与边界，再挑选方…",{"id":67,"title":68,"categoryId":12,"categoryName":13,"isTop":27,"viewCount":69,"createdAt":70,"updatedAt":46,"excerpt":71},76,"一次 前端监控体系 的踩坑记录",1787,"2026-09-21T23:30:42.000Z","这是「前端监控体系」主题下的一篇实践记录：一次 前端监控体系 的踩坑记录。内容用于填充示例数据，方便浏览分页、搜索结果与文章详情。 为什么关注这个主题 在真实项目里，前端监控体系往往不是孤立的知识点，而是和性能、稳定性、可维护性纠缠在一起。把它单独拿出来梳理一遍，遇到问题时才有判断依据。 实践要点 先明确目标与边界，再…",110,6,[75,81,88],{"id":12,"title":76,"categoryId":16,"categoryName":17,"isTop":27,"viewCount":77,"createdAt":78,"updatedAt":79,"excerpt":80},"Redis 缓存设计中最容易踩的五个坑",1564,"2026-11-09T18:30:42.000Z","2026-11-14T00:34:46.000Z","缓存能解决性能问题，也能制造性能问题。下面这五个坑，是我在几个真实项目里反复见到的。 一、缓存雪崩 大量 key 在同一时刻过期，请求瞬间全部打到数据库。解决办法是给过期时间加随机抖动： const ttl = 300 + Math.floor(Math.random() * 60); await redis.set(…",{"id":82,"title":83,"categoryId":16,"categoryName":17,"isTop":27,"viewCount":84,"createdAt":85,"updatedAt":86,"excerpt":87},18,"深入理解 REST 与 GraphQL 选型",1037,"2026-11-06T21:30:42.000Z","2026-11-14T00:41:03.000Z","这是「REST 与 GraphQL 选型」主题下的一篇实践记录：深入理解 REST 与 GraphQL 选型。内容用于填充示例数据，方便浏览分页、搜索结果与文章详情。 为什么关注这个主题 在真实项目里，REST 与 GraphQL 选型往往不是孤立的知识点，而是和性能、稳定性、可维护性纠缠在一起。把它单独拿出来梳理一遍…",{"id":89,"title":90,"categoryId":16,"categoryName":17,"isTop":27,"viewCount":91,"createdAt":92,"updatedAt":93,"excerpt":94},19,"深入理解 Node.js 流式处理",1171,"2026-11-06T02:30:42.000Z","2026-11-14T00:34:47.000Z","这是「Node.js 流式处理」主题下的一篇实践记录：深入理解 Node.js 流式处理。内容用于填充示例数据，方便浏览分页、搜索结果与文章详情。 为什么关注这个主题 在真实项目里，Node.js 流式处理往往不是孤立的知识点，而是和性能、稳定性、可维护性纠缠在一起。把它单独拿出来梳理一遍，遇到问题时才有判断依据。 实…"]