在构建 Web 应用时用户认证就像是给你的系统装一扇门。如何既保证这扇门足够安全，又让它足够智Neng，不让好人每次进出dou掏钥匙，是每个开发者dou要面对的挑战。

双Token机制：安全与体验的平衡之道

Zui初写项目时我们在 mock 中使用了单 Token 的机制，通过 sign 直接签发一个长期的 Token，而拦截器中只要碰到 401，就直接强制登出，返回登录页：

这样的单 Token 模式却暴露了hen多缺陷：Token 有效期设短了用户体验差；设长了安全风险大。双 Token 机制巧妙地引入了两把不同用途的“钥匙”来解决这个问题。

核心原理

每当用户进行登录时会同时签发一对 Token：

Access Token用于日常请求，有效期较短。

Refresh Token专门用来刷新 Access Token，有效期较长。

// AuthService: 生成双 Token private async generateTokens { const payload = { sub: userId, name: username }; const = await Promise.all(); return { access_token: at, refresh_token: rt }; }

核心代码分析使用 Promise.all 并行执行，提高效率。

后端实现：Token 签发与验证

后端部分负责 Token 的签发与验证。

NestJS 守卫与策略

NestJS 提供了默认的 Guard，用于解析 req.headers.Authorization 中的 Token。我们只需继承该 Guard，并指定使用 JWT 策略：

import { Injectable } from "@nestjs/common"; import { AuthGuard } from "@nestjs/passport"; @Injectable export class JwtAuthGuard extends AuthGuard { }

只需在需要鉴权的路由上加上装饰器即可：

@Post @UseGuards createPost title: string, @Body content: string, @Req req) { const { user } = req; return this.postsService.createPost; } 前端部分核心实现

前端的挑战在于如何管理这些 Token，并在 Token 过期时“悄无声息”地完成刷新，让用户感觉不到任何中断。

拦截器实现 Token 无感刷新

为什么在拦截器里Zuo？

因为拦截器是所有 HTTP 请求的总关口。在这里处理，Ke以统一拦截所有 API 的 401 错误，业务代码完全不需要关心 Token 是否过期，Zuo到了逻辑解耦。

let isRefreshing = false; let requestsQueue = ; // 响应拦截器 instance.interceptors.response.use => { const { config, response } = err; if { if { return new Promise => { requestsQueue.push => { config.headers.Authorization = `Bearer ${token}`; resolve); }); }); } // ...刷新Token逻辑... } return Promise.reject; }); 关键逻辑拆解

判断是否需要刷新Token

当401 错误发生，且非重试请求时进入刷新逻辑。

if  { ... }

处理并发请求

当多个请求因Token过期失败时不Neng每个dou去刷新Token。应只触发一次刷新，其余请求排队等待新Token。

if  {
  return new Promise => {
    requestsQueue.push => {
      config.headers.Authorization = `Bearer ${token}`;
      resolve);
    });
  });
}

无感刷新实现

const { refreshToken } = useUserStore.getState;
const { access_token, refresh_token } = await instance.post('/auth/refresh', {
  refresh_token: refreshToken
});
useUserStore.setState({
  accessToken: access_token,
  refreshToken: refresh_token
});

重放排队请求

requestsQueue.forEach);
requestsQueue = ;

重试当前请求

config.headers.Authorization = `Bearer ${access_token}`;
return instance;

处理刷新失败

如刷新失败，直接登出并跳转登录页。

 {
useUserStore.getState.logout;
window.location.href='/login';
returnPromise.reject;
}finally{
isRefreshing=false;
}

JWT双Token无感刷新机制，本质上是一种在安全性和用户体验之间取得精妙平衡的工程实践。通过将认证职责拆分为短期有效的Access Token与长期有效的Refresh Token，我们既避免了长期持有敏感凭证带来的安全风险，又消除了用户频繁登录的体验断层。

说实话，这套方案的核心价值在于：安全不妥协，体验不打折 。Access Token的短生命周期极大降低了泄露后的危害窗口，而Refresh Token的独立存储与严格校验则保障了凭证刷新的安全边界。同时通过队列机制与重试标记，前端有效解决了并发请求下的Token竞态问题，确保系统在高负载下依然稳定可靠。

但在大多数中大型全栈应用中，这套双Token + 无感刷新 的组合，无疑是当前兼顾安全性、可维护性与用户体验 的优选方案。咱就是说这套机制虽然kan起来复杂，但一旦落地实施，你会发现它真的hen香！你懂的~

---