在现代 Web 应用中，身份验证（Authentication）和权限控制（Authorization）是保障安全的核心机制。通常，前端登录成功后会拿到一个 access_token（访问令牌）用于后续请求。但为了安全，这个 access_token 的有效期往往较短，比如 15 分钟或 1 小时。如果不做处理，Token 过期后用户就需要重新登录，这会导致用户体验变差。为了解决这个问题，我们引入了“无感刷新 Token”机制，即在不打断用户操作的前提下，悄悄完成 Token 的续期，让经常使用的用户察觉不到 Token 的生命周期。

  在前端开发中，我们经常与 Cookie 打交道。它是浏览器最原始的数据持久化方案，被广泛用于记录登录状态、用户偏好等信息。然而，Cookie 也是 XSS 攻击的高发地带，尤其是当我们把敏感信息（如 Token）直接暴露在 document.cookie 中时，风险极高。为了解决这一问题，浏览器支持了一个重要的 Cookie 属性：HttpOnly。它是保障 Web 安全的重要方法，很多前后端分离项目在实现登录、权限控制时，都会用到。

  在开发前后端分离或全栈应用时，我们经常需要在不同环境之间传递复杂的数据结构。使用原生 JSON.stringify 会丢失如 Date、BigInt、undefined 等类型信息，导致数据无法还原。SuperJSON 是一个增强的序列化的工具，解决了这些痛点，适用于前后端通信、本地缓存、甚至在 Redis 中安全存储复杂数据。

  在前端开发中，我们经常需要对数组、对象或其他可遍历结构进行循环。JavaScript 提供了多种方式，其中最容易混淆的就是 for...in 和 for...of，真的很难记。它们看起来很像，但本质上完全不同，作用对象和遍历内容也大不一样。本篇文章将带你系统地了解它们之间的区别与使用场景。

   JavaScript 是单线程语言，所有任务（包括 UI 渲染、事件处理、计时器等）都运行在一个主线程中。当遇到计算密集型任务时，页面可能会卡顿、响应变慢，一些动画、计时器会出现延迟。这时，Web Worker 作为 Web 提供的一种“多线程”能力，就成了性能优化的重要手段。本文将带你了解 Web Worker，并通过计时器优化这一实际场景说明它的价值。

  在早期的 JavaScript 中，Object 是唯一可用的键值对结构，常被当作“字典”使用。随着 ES6 的推出，Map 以更现代化和高性能的形式登场，解决了 Object 在键类型、性能、原型污染等方面的局限。理解两者的异同，不仅能写出更清晰的代码，也能在性能和安全性上获得提升。

  Tauri 是一个新兴的桌面应用开发框架，它使用 Rust 构建底层逻辑，前端则采用 Web 技术栈。与传统的 Electron 相比，Tauri 提供了更小的打包体积和更高的安全性，逐渐成为跨平台桌面应用的热门选择。

  在使用 React 开发项目时你可能注意到，当点击页面中的跳转链接时，地址栏的 URL 发生了变化，但页面却没有被重载，只是改了部分内容。这在传统网页中几乎是不可能的事，我们一旦换了 URL 地址，浏览器就会向服务器发起请求并重新加载页面。那为什么在 React 里，页面地址变了却不刷新？

  在现代前端开发中，前端路由几乎是单页应用（SPA）不可或缺的一部分。Vue Router、React Router 等流行工具对路由进行了很好的实现，本文将通过一个简单的 Hash 路由实现一个简单的前端路由系统，帮助更好的理解路由实现逻辑。

  前端项目越来越复杂，需要对接的后端接口也越来越多，处理这些数据的逻辑时常让人头大。之前一直听说 TanStack Query 在这方面现在还挺好用的，今天来简单认识一下一下。