快捷導(dǎo)航

前端實(shí)現(xiàn)無(wú)感刷新Token的方法與避坑指南

更新時(shí)間：2026年03月25日 08:43:40 作者：前端Hardy

實(shí)現(xiàn)token無(wú)感刷新對(duì)于前端來(lái)說(shuō)是一項(xiàng)非常常用的技術(shù),今天,我們就來(lái)徹底搞懂如何真正實(shí)現(xiàn)無(wú)感刷新Token以及為什么?90%?的實(shí)現(xiàn)都有致命缺陷

錯(cuò)誤做法一：在每個(gè)接口里手動(dòng)判斷 401

// 千萬(wàn)別這么寫！
fetch('/api/user')
  .then(res => {
    if (res.status === 401) {
      // 重新登錄 or 刷新 token？
      window.location.href = '/login';
    }
  });

問(wèn)題在哪？

每個(gè)接口都要重復(fù)寫邏輯；
如果多個(gè)請(qǐng)求同時(shí) 401，會(huì)觸發(fā)多次刷新，甚至多次跳登錄；
完全無(wú)法做到“無(wú)感”。

錯(cuò)誤做法二：全局?jǐn)r截 401 后直接刷新 Token 并重試一次

這是目前最“主流”的錯(cuò)誤方案：

// 偽代碼：看似聰明，實(shí)則危險(xiǎn)
axios.interceptors.response.use(
  res => res,
  async (error) => {
    if (error.response.status === 401) {
      const newToken = await refreshToken(); // 獲取新 token
      saveToken(newToken);
      
      // 用新 token 重試原請(qǐng)求
      return axios(error.config);
    }
  }
);

表面看沒問(wèn)題，但隱藏三大坑

坑 1：并發(fā)請(qǐng)求雪崩

當(dāng)頁(yè)面剛加載，10 個(gè)接口同時(shí)發(fā)起，而此時(shí) Token 已過(guò)期 ——10 個(gè)請(qǐng)求全部返回 401 → 觸發(fā) 10 次 refreshToken() → 后端收到 10 個(gè)刷新請(qǐng)求！

后果：

后端可能拒絕重復(fù)刷新（安全策略）；
Refresh Token 被提前消耗，后續(xù)真失效；
用戶反而被踢下線。

坑 2：Refresh Token 泄露風(fēng)險(xiǎn)

如果前端把 Refresh Token 存在 localStorage，一旦 XSS 攻擊成功，攻擊者可長(zhǎng)期盜用賬號(hào)。

安全最佳實(shí)踐：Refresh Token 應(yīng)僅存于 HttpOnly Cookie，前端不可讀！

但上述方案要求前端“拿到新 token”，這就逼你把 Refresh Token 暴露給 JS —— 安全與功能不可兼得？

坑 3：無(wú)限重試死循環(huán)

如果 refreshToken() 本身也返回 401（比如 Refresh Token 也過(guò)期了），重試原請(qǐng)求 → 又 401 → 再刷新 → 再 401 → ……

瀏覽器卡死，內(nèi)存飆升。

正確方式：用“鎖機(jī)制 + 隊(duì)列 + 安全存儲(chǔ)”三位一體

要實(shí)現(xiàn)真正的無(wú)感刷新，必須同時(shí)解決：

并發(fā)控制（只刷一次）
安全存儲(chǔ)（Refresh Token 不暴露給 JS）
失敗兜底（Refresh 失敗時(shí)優(yōu)雅降級(jí)）

第一步：后端配合 —— Refresh Token 存 HttpOnly Cookie

HTTP/1.1 200 OK
Set-Cookie: refreshToken=abc123; HttpOnly; Secure; SameSite=Strict; Path=/auth

前端永遠(yuǎn)拿不到 refreshToken，但每次請(qǐng)求會(huì)自動(dòng)攜帶。

第二步：前端實(shí)現(xiàn)“單例刷新鎖 + 請(qǐng)求隊(duì)列”

let isRefreshing = false;
let refreshPromise = null;
const failedQueue = [];

// 重試隊(duì)列中的請(qǐng)求
const processQueue = (error, token = null) => {
  failedQueue.forEach(({ resolve, reject }) => {
    if (error) {
      reject(error);
    } else {
      resolve(token);
    }
  });
  failedQueue.length = 0;
};

axios.interceptors.response.use(
  response => response,
  async (error) => {
    const originalRequest = error.config;

    if (error.response?.status === 401 && !originalRequest._retry) {
      if (isRefreshing) {
        // 已在刷新中，將請(qǐng)求加入隊(duì)列，等待新 token
        return new Promise((resolve, reject) => {
          failedQueue.push({ resolve, reject });
        }).then(token => {
          originalRequest.headers['Authorization'] = `Bearer ${token}`;
          return axios(originalRequest);
        });
      }

      originalRequest._retry = true;
      isRefreshing = true;

      try {
        // 調(diào)用刷新接口（后端從 Cookie 讀 refreshToken）
        const { data } = await axios.post('/auth/refresh');
        const newAccessToken = data.accessToken;

        // 通知所有排隊(duì)的請(qǐng)求
        processQueue(null, newAccessToken);

        // 重試當(dāng)前請(qǐng)求
        originalRequest.headers['Authorization'] = `Bearer ${newAccessToken}`;
        return axios(originalRequest);
      } catch (refreshError) {
        // 刷新失?。呵蹇毡镜厣矸荩D(zhuǎn)登錄
        clearAuth();
        processQueue(refreshError, null);
        window.location.href = '/login';
        return Promise.reject(refreshError);
      } finally {
        isRefreshing = false;
        refreshPromise = null;
      }
    }

    return Promise.reject(error);
  }
);

關(guān)鍵設(shè)計(jì)解析

機(jī)制	作用
isRefreshing 鎖	確保同一時(shí)間只發(fā)起一次刷新
failedQueue 隊(duì)列	緩存所有因 401 失敗的請(qǐng)求，等新 token 到手后批量重試
_retry 標(biāo)記	防止重試后的請(qǐng)求再次進(jìn)入刷新邏輯
HttpOnly Cookie	保護(hù) Refresh Token 不被 XSS 竊取

安全補(bǔ)充：前端 Token 存儲(chǔ)建議

Token 類型	推薦存儲(chǔ)方式	原因
Access Token	內(nèi)存（JS 變量）或 sessionStorage	短期有效，避免持久化泄露
Refresh Token	HttpOnly Cookie	前端不可讀，防 XSS

切勿將任何 Token 存入 localStorage！這是 XSS 攻擊的黃金目標(biāo)。