實現無感重新整理Token技術:.Net Web API與axios的完美結合

chingho發表於2024-11-11

這是我之前分享在星球裡面的課程,下面整理下,分享下這個無感重新整理Token技術方案。

圖片

我們都知道Token是有設定有效期的,為了安全都不會設定過長的有效期;但設定有效期太短,又會導致經常需要重新登入。

這就需要無感重新整理Token的方案,來提升使用者體驗。

目前比較常用的方案是:雙token機制。

1、登入時同時返回:Token、RefreshToken,Token用於請求業務介面,RefreshToken用於重新整理Token介面;

2、每一次Http請求,客戶端都會判斷伺服器返回狀態,如果是401,代表Token過期;

3、客戶端使用RefreshToken,請求伺服器Token重新整理介面,並獲取新的:Token,RefreshToken;

4、如果第3步驟成功返回,更新本地的Token、RefreshToken;如果返回失敗,代表RefreshToken也過期了,提示過期並跳轉至登入頁面。

下面我們一起看下實現步驟:

1、後臺登入介面

登入驗證,驗證使用者名稱和密碼,驗證透過返回Token。

圖片

登入介面返回的2個內容:Token和RefreshToken,這兩個有效期不一樣,比如Token有效期是30分鐘,RefreshToken有效期是60分鐘。****

圖片

2、後臺重新整理token介面

和登入介面一樣,也是返回:Token和RefreshToken。

圖片

3、前端登入功能

在前端登入頁面,成功登入後,把Token和RefreshToken儲存在本地,可以儲存在Cookie或者LocalStorage。

圖片

4、錯誤響應攔截器

axios響應攔截器新增如下程式碼:

a、判斷Http返回狀態是否為401。

b、判斷是否授權資訊是否使用refreshToken,呼叫重新整理token介面,同樣也會發起Http請求,如果refreshToken也過期了,同樣會返回401;所以這邊要加判斷,避免進入死迴圈。

c、如果refreshToken也過期了,直接跳轉至登入頁面。

d、如果呼叫重新整理token介面成功返回,更新本地儲存的Token、RefreshToken;並獲取上一次業務請求的內容,並更新驗證資訊,重新發起上一次業務請求,這樣才能實現無感重新整理。

圖片

5、實現效果

最終實現效果如下:

1、請求使用者列表介面,返回401;

2、呼叫token重新整理介面;

3、重新請求使用者列表介面。

在這過程中,第一次發起使用者搜尋請求是失敗的,我們馬上重新整理token,並重新發起第二次使用者搜尋請求,但對使用者來說是透明、毫無察覺的。

圖片

好了,今天就分享到這了。也歡迎掃描以下二維碼,備註:.Net,加入.Net交流群。

圖片

- End -

相關文章