前言

之前在面試的時候被問到過刷新 token 的問題，其實我對 token 驗證機制的細節(jié)一直不清楚。新項目和后端的同學商量后使用刷新 token 來實現(xiàn)。本文主要分享一下對 token 機制的理解和實現(xiàn)方式。

登錄驗證的方式

登錄驗證一般來說有兩個目的，一個是為了安全，一個是為了用戶方便。因為 HTTP 是無狀態(tài)的，所以后端在接受到請求之后并不能知道請求是從哪里來的，但是很多時候我們有驗證用戶身份的需求，同時前端又有保存用戶登錄狀態(tài)的需求。而如果將用戶信息保存在前端，必然是非常危險的，很容易被獲取，所以就有了在后端進行非對稱加密的方式來實現(xiàn)登錄的驗證和保存。

目前主要的登錄驗證方式有 cookie + session，token，單點登錄和 OAuth 第三方登錄。本文我們主要講一講 token 登錄驗證。

什么是 token

token 直譯就是令牌的意思，其實就是后端將用戶信息進行非對稱加密，然后將加密后的內(nèi)容保存在前端，當發(fā)送請求的時候帶上這個令牌來實現(xiàn)身份驗證。大致的過程是第一次登錄用戶輸入用戶名和密碼，服務(wù)器驗證無誤后會對用戶的信息進行非對稱加密生成一個令牌返回給前端，前端可以存入 cookie 或者 localStorage 等，以后每次發(fā)送請求帶上這個令牌，后端通過對令牌的驗證來識別用戶的身份以及請求的合法性。

token 的優(yōu)點是服務(wù)端不需要保存 token，只需要驗證前端傳過來的 token 即可，所以幾遍是分布式部署也可以使用這種方式。token 的缺點就是，由于服務(wù)器不保存 session 狀態(tài)，因此無法在使用過程中廢止某個 token，或者更改 token 的權(quán)限。也就是說，一旦 token 簽發(fā)了，在到期之前就會始終有效，除非服務(wù)器部署額外的邏輯。

目前比較常用的 token 加密方式是 JWT JSON Web Token，關(guān)于 JWT 可以參考阮一峰老師的 JSON Web Token 入門教程

token 刷新

按照上面的 token 邏輯，前端只要保存一個后端傳過來的 token，每次請求附上即可。當令牌過期有兩種選擇，我們可以讓用戶沖洗你登錄，或者后端生成一個新的令牌，前端保存新的令牌并重新發(fā)送請求。但是這兩種方式都有問題，如果讓用戶重新登錄，用戶體驗不是很好，頻繁的重新登錄并不是一種比較好的交互方式。而如果自動生成新的令牌則會出現(xiàn)安全問題，比如黑客獲取了一個過期的令牌并向后端發(fā)送請求，則也可以獲得一個更新的令牌。

為了權(quán)衡上面的問題，產(chǎn)生了一種刷新 token 的機制，當用戶第一次登錄成功，后端會返回兩個 token，一個 accessToken 用來進行請求，也就是我們每次請求都附上 accessToken，而 refreshToken 則是用來在 accessToken 過期的時候進行 accessToken 的刷新。一般來說，accessToken 由于每次請求都會附上，所以安全風險比較高，所以過期時間較短，而 refreshToken 則只有在 accessToken 過期的時候才會發(fā)送到后端，所以安全風險相對較低，所以過期時間可以長一點。

當我們的 accessToken 過期之后，我們會向后端的 token 刷新接口請求并傳入 refreshToken，后端驗證梅雨問題之后會給我們一個新的 accessToken，我們保存后就可以保證訪問的連續(xù)性。當然，這也并非絕對安全的，只是一種相對安全一點的做法。一般我們將兩個 token 保存在 localStorage 中。

刷新 token 的實現(xiàn)

在項目中我主要使用的是 axios，所以 token 的刷新以及請求附帶 token 都是使用的 axios 的攔截器完成的。這其中需要注意的地方有三點：

1. 不要重復(fù)刷新 token，即一個請求已經(jīng)刷新 token 了，此時可能新的 token 還沒有回來，其他請求不應(yīng)該重復(fù)刷新。
2. 當新的 token 還沒有回來的時候，其他的請求應(yīng)該進行暫存，等新的 token 回來以后再一次進行請求。
3. 如果請求是由登錄頁面或者請求本身就是刷新 token 的請求則不需要攔截，否則會陷入死循環(huán)。

第一個問題用一個 Boolean 字段加鎖即可，第二個問題將請求新 token 過程中發(fā)起的請求用狀態(tài)為 pendding 的 Promise 進行暫存，放到一個數(shù)組中，當新的 token 回來的時候依次 resolve 每一個 pendding 的 Promise 即可。具體的代碼細節(jié)我直接貼上項目上的源碼：

import axios, * as AxiosInterface from 'axios';

// Token 接口，訪問 token，刷新 token 和過期時
const instance = axios.create({
 // baseURL: ''
 timeout: 300000,
 headers: {
  'Content-Type': 'application/json',
  'X-Requested-With': 'XMLHttpRequest',
 },
});

async function refreshAccessToken(): Promise<AxiosInterface.AxiosResponse<AxiosData>> {
 return await instance.post('api/refreshtoken');
}

let isRefreshing = false;
let requests: Array<Function> = []; // 若在 token 刷新過程中進來多個請求則存入 requests 中
// axios.defaults.baseURL = 'http://127.0.0.1:8888/api/private/v1/';
// 設(shè)置請求攔截器，若 token 過期則刷新 token
axios.interceptors.request.use(config => {
 const tokenObj = JSON.parse(window.localStorage.getItem('token') as string);
 if (config.url === 'api/login' || config.url === 'api/refreshtoken') return config;
 let accessToken = tokenObj.accessToken;
 let expireTime = tokenObj.expireTime;
 const refreshToken = tokenObj.refreshToken;

 config.headers.Authorization = accessToken;

 let time = Date.now();
 console.log(time, expireTime);
 if (time > expireTime) {
  if (!isRefreshing) {
   isRefreshing = true;
   refreshAccessToken()
    .then(res => {
     ({ accessToken, expireTime } = res.data.data);
     time = Date.now();
     const tokenStorage = {
      accessToken,
      refreshToken,
      expireTime: Number(time) + Number(expireTime),
     };
     window.localStorage.setItem('token', JSON.stringify(tokenStorage));
     isRefreshing = false;
     return accessToken;
    })
    .then((accessToken: string) => {
     requests.forEach(cb => {
      cb(accessToken);
     });
     requests = [];
    })
    .catch((err: string) => {
     throw new Error(`refresh token error: {err}`);
    });
  }

  // 如果是在刷新 token 時進行的請求則暫存在 requests 數(shù)組中，這里需要使用一個 pendding 的 Promise 來確保攔截的成功
  const parallelRequest: Promise<AxiosInterface.AxiosRequestConfig> = new Promise(resolve => {
   requests.push((accessToken: string) => {
    config.headers.Authorization = accessToken;
    console.log(accessToken + Math.random() * 1000);
    resolve(config);
   });
  });

  return parallelRequest;
 }

 return config;
});

export default (vue: Function) => {
 vue.prototype.http = axios;
};

總結(jié)

以上就是我對刷新 token 的實現(xiàn)，如果有什么錯誤之處歡迎指正交流。

以上就是token 機制和實現(xiàn)方式的詳細內(nèi)容，更多關(guān)于token 機制和實現(xiàn)方式的資料請關(guān)注腳本之家其它相關(guān)文章！

最新評論