大家好，干了6年前端，和Token斗智斗勇了不知道多少回。最煩的就是用戶(hù)正填著表單呢，突然跳登錄頁(yè)——Token過(guò)期了！今天就跟大家聊聊如何優(yōu)雅處理Token過(guò)期，甚至讓它自動(dòng)續(xù)期，讓用戶(hù)無(wú)感知！

一、Token過(guò)期，用戶(hù)的噩夢(mèng)

想象一下：

• 用戶(hù)填了半小時(shí)的報(bào)銷(xiāo)單，點(diǎn)擊提交—— “登錄失效，請(qǐng)重新登錄”
• 購(gòu)物車(chē)選了半天，結(jié)算時(shí)——跳轉(zhuǎn)登錄頁(yè)

血壓直接拉滿(mǎn)，用戶(hù)體驗(yàn)直接崩盤(pán)！

常見(jiàn)處理方式（但不夠優(yōu)雅）

• 粗暴型：Token過(guò)期直接跳登錄頁(yè)（用戶(hù)罵娘）
• 提醒型：彈窗提示“登錄已過(guò)期”（用戶(hù)還是得手動(dòng)操作）
• 輪詢(xún)檢查型：定時(shí)檢查T(mén)oken是否快過(guò)期（浪費(fèi)請(qǐng)求）

但今天我要講的是更高級(jí)的玩法——無(wú)感知自動(dòng)續(xù)期！

二、Token自動(dòng)續(xù)期方案

1. 方案核心思路

• 短期Token（Access Token） ：用來(lái)做日常請(qǐng)求（比如2小時(shí)過(guò)期）
• 長(zhǎng)期Token（Refresh Token） ：用來(lái)?yè)Q新Token（比如7天過(guò)期）

流程：

• 用戶(hù)登錄，拿到 access_token 和 refresh_token
• access_token 過(guò)期后，用 refresh_token 去換新的
• 如果 refresh_token 也過(guò)期了，才讓用戶(hù)重新登錄

2. 前端如何實(shí)現(xiàn)

（1）Axios 攔截器處理過(guò)期

// 請(qǐng)求攔截
axios.interceptors.request.use(config => {
  const accessToken = localStorage.getItem('access_token')
  if (accessToken) {
    config.headers.Authorization = `Bearer ${accessToken}`
  }
  return config
})

// 響應(yīng)攔截
axios.interceptors.response.use(
  response => response,
  async error => {
    const originalRequest = error.config
    // 如果是401（Token過(guò)期）且未重試過(guò)
    if (error.response.status === 401 && !originalRequest._retry) {
      originalRequest._retry = true
      try {
        // 用 refresh_token 換新的 access_token
        const res = await axios.post('/refresh-token', {
          refresh_token: localStorage.getItem('refresh_token')
        })
        const { access_token, refresh_token } = res.data
        localStorage.setItem('access_token', access_token)
        localStorage.setItem('refresh_token', refresh_token)
        // 重新發(fā)之前的請(qǐng)求
        originalRequest.headers.Authorization = `Bearer ${access_token}`
        return axios(originalRequest)
      } catch (refreshError) {
        // refresh_token 也過(guò)期了，跳登錄頁(yè)
        window.location.href = '/login'
      }
    }
    return Promise.reject(error)
  }
)

（2）提前續(xù)期（更絲滑）

如果等Token完全過(guò)期再換新，用戶(hù)可能會(huì)遇到卡頓。更優(yōu)解是在Token快過(guò)期時(shí)提前續(xù)期：

// 檢查T(mén)oken剩余時(shí)間
function checkTokenExpiry() {
  const token = localStorage.getItem('access_token')
  if (!token) return false
  
  const payload = JSON.parse(atob(token.split('.')[1])) // 解析JWT
  const expiresIn = payload.exp * 1000 - Date.now()
  
  // 如果還剩5分鐘過(guò)期，就續(xù)期
  if (expiresIn < 5 * 60 * 1000) {
    refreshToken()
  }
}

// 定時(shí)檢查（每10分鐘一次）
setInterval(checkTokenExpiry, 10 * 60 * 1000)

三、安全注意事項(xiàng)

Refresh Token 必須HttpOnly + Secure（防止XSS盜取）

短期Token有效期別太長(zhǎng)（建議2小時(shí)以?xún)?nèi)）

單點(diǎn)登錄（SSO）場(chǎng)景要額外處理

四、實(shí)際項(xiàng)目踩坑記錄

去年我做的一個(gè)后臺(tái)系統(tǒng)，Token過(guò)期問(wèn)題特別嚴(yán)重，用戶(hù)經(jīng)常填表到一半被踢出。

優(yōu)化前：Token 2小時(shí)過(guò)期，直接跳登錄頁(yè)，用戶(hù)投訴爆炸

優(yōu)化后：

• Access Token 2小時(shí)過(guò)期
• Refresh Token 7天過(guò)期
• 提前5分鐘自動(dòng)續(xù)期
• 最終用戶(hù)幾乎感知不到Token刷新，體驗(yàn)大幅提升！

五、知識(shí)延展

前端怎么無(wú)感刷新token

當(dāng) Token 過(guò)期時(shí)，前端可以使用以下兩種無(wú)感刷新 Token 的方案：

1. 使用刷新Token（Refresh Token）

在登錄成功后，后端會(huì)返回兩個(gè)Token，一個(gè)是Access Token，一個(gè)是Refresh Token。前端需要將這兩個(gè)Token保存到本地存儲(chǔ)中，例如localStorage或sessionStorage中，以便在需要時(shí)使用。

當(dāng)需要訪問(wèn)API時(shí)，前端將從本地存儲(chǔ)中獲取Access Token，并將其放入請(qǐng)求頭中發(fā)送到后端。如果Access Token過(guò)期了，后端會(huì)返回一個(gè)錯(cuò)誤響應(yīng)，并提示前端進(jìn)行刷新Token的操作。

前端可以使用下面的代碼實(shí)現(xiàn)刷新Token的操作：

function refreshToken() {
  const refreshToken = localStorage.getItem('refreshToken');
  // 發(fā)送請(qǐng)求到后端，獲取新的Access Token
  fetch('/api/refreshToken', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({ refreshToken })
  })
  .then(response => response.json())
  .then(data => {
    // 將新的Access Token更新到本地存儲(chǔ)中
    localStorage.setItem('accessToken', data.accessToken);
  })
  .catch(error => {
    console.error('刷新Token失?。?, error);
  });
}

當(dāng)需要刷新Token時(shí)，前端可以調(diào)用refreshToken函數(shù)，該函數(shù)會(huì)向后端發(fā)送請(qǐng)求，獲取新的Access Token，并將其更新到本地存儲(chǔ)中。在使用API時(shí)，前端需要檢查Access Token是否過(guò)期，如果過(guò)期了，則需要調(diào)用refreshToken函數(shù)來(lái)獲取新的Access Token。

2. 使用續(xù)期接口

在登錄成功后，后端會(huì)返回一個(gè)Access Token和一個(gè)過(guò)期時(shí)間。前端可以將Access Token和過(guò)期時(shí)間保存到本地存儲(chǔ)中，以便在需要時(shí)使用。

前端需要定時(shí)檢查Access Token是否過(guò)期，如果過(guò)期了，則需要向后端發(fā)送續(xù)期請(qǐng)求來(lái)更新Access Token的過(guò)期時(shí)間。下面是一個(gè)示例代碼：

function renewToken() {
  const accessToken = localStorage.getItem('accessToken');
  const expireTime = localStorage.getItem('expireTime');
  // 計(jì)算AccessToken的剩余有效時(shí)間
  const remainTime = expireTime - Date.now();
  // 如果AccessToken的剩余有效時(shí)間小于5分鐘，則發(fā)送續(xù)期請(qǐng)求
  if (remainTime < 5 * 60 * 1000) {
    // 發(fā)送續(xù)期請(qǐng)求到后端，更新AccessToken的過(guò)期時(shí)間
    fetch('/api/renewToken', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({ accessToken })
    })
    .then(response => response.json())
    .then(data => {
      // 將新的過(guò)期時(shí)間更新到本地存儲(chǔ)中
      localStorage.setItem('expireTime', data.expireTime);
    })
    .catch(error => {
      console.error('續(xù)期Token失?。?, error);
    });
  }
}

// 定時(shí)檢查AccessToken的過(guò)期時(shí)間
setInterval(renewToken, 60 * 1000);

上面的代碼中，renewToken函數(shù)會(huì)檢查Access Token的過(guò)期時(shí)間，如果剩余有效時(shí)間小于5分鐘，則會(huì)向后端發(fā)送續(xù)期請(qǐng)求來(lái)更新AccessToken的過(guò)期時(shí)間。在使用API時(shí)，前端需要定時(shí)調(diào)用renewToken函數(shù)來(lái)檢查Access Token的過(guò)期時(shí)間，并更新過(guò)期時(shí)間。

六、總結(jié)

Token過(guò)期處理得好，用戶(hù)體驗(yàn)直接起飛！核心思路：

• 短期Token + 長(zhǎng)期Refresh Token
• Axios攔截器自動(dòng)換新Token
• 提前續(xù)期避免卡頓
• 安全存儲(chǔ)Refresh Token

如果你的項(xiàng)目還在用“Token過(guò)期就跳登錄”的粗暴方案，趕緊優(yōu)化吧！

?到此這篇關(guān)于Vue如何優(yōu)雅處理Token過(guò)期并自動(dòng)續(xù)期的文章就介紹到這了,更多相關(guān)Vue處理Token過(guò)期內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！