快捷導航

無感知刷新Token示例簡析

更新時間：2023年04月04日 09:18:02 作者：XinD

這篇文章主要為大家介紹了無感知刷新Token及認證原理解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

引言

在前后端分離的應用中，使用Token進行認證是一種較為常見的方式。但是，由于Token的有效期限制，需要不斷刷新Token，否則會導致用戶認證失敗。為了解決這個問題，可以實現(xiàn)無感知刷新Token的功能，本文將介紹如何實現(xiàn)無感知刷新Token。

Token認證的原理

在Web應用中，常見的Token認證方式有基于Cookie和基于Token的認證?；贑ookie的認證方式是將認證信息保存在Cookie中，每次請求時將Cookie發(fā)送給服務(wù)器進行認證；而基于Token的認證方式是將認證信息保存在Token中，每次請求時將Token發(fā)送給服務(wù)器進行認證。

在基于Token的認證方式中，客戶端將認證信息保存在Token中，而不是保存在Cookie中。在認證成功后，服務(wù)器將生成一個Access Token和一個Refresh Token，并將它們返回給客戶端。Access Token用于訪問受保護的API，Refresh Token用于獲取新的Access Token。

什么是無感知刷新Token

無感知刷新Token是指，在Token過期之前，系統(tǒng)自動使用Refresh Token獲取新的Access Token，從而實現(xiàn)Token的無感知刷新，用戶可以無縫繼續(xù)使用應用。

在實現(xiàn)無感知刷新Token的過程中，需要考慮以下幾個方面：

如何判斷Token是否過期？
如何在Token過期時自動使用Refresh Token獲取新的Access Token？
如何處理Refresh Token的安全問題？

下面將介紹如何實現(xiàn)無感知刷新Token的具體步驟。

實現(xiàn)步驟

步驟一：獲取Access Token和Refresh Token

在認證成功后，需要將Access Token和Refresh Token發(fā)送給客戶端。Access Token用于訪問受保護的API，Refresh Token用于獲取新的Access Token?？梢允褂肑WT（JSON Web Token）或OAuth2（開放授權(quán)）等方式實現(xiàn)認證。

在JWT中，可以使用如下代碼生成Access Token和Refresh Token：

const accessToken = jwt.sign({userId: '123'}, 'ACCESS_TOKEN_SECRET', {expiresIn: '15m'});
const refreshToken = jwt.sign({userId: '123'}, 'REFRESH_TOKEN_SECRET', {expiresIn: '7d'});

步驟二：在請求中攜帶Access Token

在每個需要認證的API請求中，需要在請求頭中攜帶Access Token，如下所示：

GET /api/user HTTP/1.1
Host: example.com
Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...

在前端中，可以使用Axios等庫設(shè)置請求頭：

axios.defaults.headers.common['Authorization'] = `Bearer ${accessToken}`;

步驟三：攔截401 Unauthorized響應

在服務(wù)器返回401 Unauthorized響應時，說明Access Token已經(jīng)過期，需要使用Refresh Token獲取新的Access Token?？梢允褂肁xios攔截器或Fetch API的中間件實現(xiàn)攔截。

在Axios中，可以使用如下代碼實現(xiàn)攔截器：

axios.interceptors.response.use(response => {
  return response;
}, error => {
  const originalRequest = error.config;
  if (error.response.status === 401 && !originalRequest._retry) {
    originalRequest._retry = true; //防止無限調(diào)用
    return axios.post('/api/refresh_token', {refreshToken})
      .then(response => {
        const { access_token, refresh_token } = response.data;
        localStorage.setItem('access_token', access_token);
        localStorage.setItem('refresh_token', refresh_token);
        axios.defaults.headers.common['Authorization'] = `Bearer ${access_token}`;
        originalRequest.headers.Authorization = `Bearer ${access_token}`;
        return axios(originalRequest);
      });
  }
  return Promise.reject(error);
});

在Fetch中，可以使用如下代碼實現(xiàn)中間件：

function authMiddleware(request) {
  const access_token = localStorage.getItem('access_token');
  if (access_token) {
    request.headers.set('Authorization', `Bearer ${access_token}`);
  }
  return request;
}
function tokenRefreshMiddleware(response) {
  if (response.status === 401) {
    const refreshToken = localStorage.getItem('refresh_token');
    return fetch('/api/refresh_token', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({ refreshToken })
    }).then(response => {
      if (response.ok) {
        return response.json();
      }
      throw new Error('Refresh Token failed');
    }).then(data => {
      localStorage.setItem('access_token', data.access_token);
      localStorage.setItem('refresh_token', data.refresh_token);
      return Promise.resolve('refreshed');
    }).catch(error => {
      localStorage.removeItem('access_token');
      localStorage.removeItem('refresh_token');
      return Promise.reject(error);
    });
  }
  return Promise.resolve('ok');
}
fetch('/api/user', {
  method: 'GET',
  headers: {
    'Content-Type': 'application/json'
  },
  middleware: [authMiddleware, tokenRefreshMiddleware]
}).then(response => {
  console.log(response);
}).catch(error => {
  console.error(error);
});

在上述代碼中，使用Axios或Fetch攔截器攔截401 Unauthorized響應，如果發(fā)現(xiàn)Access Token已經(jīng)過期，則發(fā)送Refresh Token請求獲取新的Access Token，并將新的Access Token設(shè)置到請求頭中，重新發(fā)送請求。

步驟四：服務(wù)器處理Refresh Token請求

在服務(wù)器端，需要編寫API處理Refresh Token請求，生成新的Access Token，并返回給客戶端。

在JWT中，可以使用如下代碼生成新的Access Token：

const accessToken = jwt.sign({userId: '123'}, 'ACCESS_TOKEN_SECRET', {expiresIn: '15m'});

在刷新Token時，需要驗證Refresh Token的合法性，可以使用如下代碼驗證Refresh Token：

try {
  const payload = jwt.verify(refreshToken, 'REFRESH_TOKEN_SECRET');
  const accessToken = jwt.sign({userId: payload.userId}, 'ACCESS_TOKEN_SECRET', {expiresIn: '15m'});
  const refreshToken = jwt.sign({userId: payload.userId}, 'REFRESH_TOKEN_SECRET', {expiresIn: '7d'});
  res.json({access_token: accessToken, refresh_token: refreshToken});
} catch (err) {
  res.sendStatus(401);
}

在上述代碼中，使用JWT的verify方法驗證Refresh Token的合法性，如果驗證成功，則生成新的Access Token和Refresh Token，并返回給客戶端。

步驟五：設(shè)置定時刷新Token

為了避免Access Token過期時間太長，可以設(shè)置定時刷新Token的功能。可以使用定時器或Web Workers等方式實現(xiàn)定時刷新Token。在每次刷新Token時，需要重新獲取新的Access Token和Refresh Token，并保存到客戶端。

function refreshToken() {
  const refreshToken = localStorage.getItem('refresh_token');
  axios.post('/api/refresh_token', {refreshToken})
    .then(response => {
      const { access_token, refresh_token } = response.data;
      localStorage.setItem('access_token', access_token);
      localStorage.setItem('refresh_token', refresh_token);
      axios.defaults.headers.common['Authorization'] = `Bearer ${access_token}`;
    })
    .catch(error => {
      console.error(error);
    });
}
setInterval(refreshToken, 14 * 60 * 1000); // 每14分鐘刷新Token

在上述代碼中，使用定時器每14分鐘刷新Token。在刷新Token成功后，將新的Access Token和Refresh Token保存到客戶端，并將新的Access Token設(shè)置到請求頭中。

安全性考慮

在實現(xiàn)無感知刷新Token的過程中，需要考慮到Refresh Token的安全性問題。因為Refresh Token具有長期的有效期限，一旦Refresh Token被泄露，攻擊者就可以使用Refresh Token獲取新的Access Token，從而繞過認證機制，訪問受保護的API。

為了增加Refresh Token的安全性，可以考慮以下幾種措施：