一、核心思路

雙 Token 機制：

• Access Token：短期有效，用于請求 API。
• Refresh Token：長期有效，用于刷新 Access Token。

認證流程：

• 用戶登錄或注冊成功后，后端返回 access_token 和 refresh_token。
• 前端將 Token 安全存儲（如 localStorage 或 cookie）。
• 每次請求 API 時，在請求頭中攜帶 access_token。
• 當 access_token 過期時，使用 refresh_token 獲取新的 access_token。
• 如果 refresh_token 也過期，則強制用戶重新登錄。

二、實現(xiàn)步驟

登錄/注冊：

• 用戶提交表單后，調用后端接口獲取 access_token 和 refresh_token。
• 將 Token 存儲到 localStorage 或 cookie 中。

請求攔截：

• 使用 Axios 攔截器，在每次請求時自動添加 access_token 到請求頭。

響應攔截：

• 攔截 401 錯誤（Token 過期），嘗試使用 refresh_token 刷新 access_token。
• 如果刷新成功，更新 access_token 并重試請求。
• 如果刷新失敗，清除 Token 并跳轉到登錄頁。

安全存儲：

• 使用 localStorage 或 cookie 存儲 Token，確保數(shù)據(jù)安全。
• 可以考慮對 Token 進行加密存儲。

退出登錄：

• 清除存儲的 Token，并跳轉到登錄頁。

三、關鍵點

Token 刷新邏輯：

• 使用 refresh_token 調用后端接口獲取新的 access_token。
• 避免重復刷新（通過 _retry 標志位）。

安全性：

• 使用 HTTPS 加密傳輸。
• 避免將 Token 暴露在前端代碼中。

用戶體驗：

• 在 Token 過期時自動刷新，減少用戶重新登錄的頻率。

Vue 3 雙 Token 加密登錄和注冊的基本邏輯流程如下：

注冊：

• 用戶提交注冊信息（如用戶名、密碼）。
• 后端驗證用戶信息合法性（如密碼強度、用戶名唯一性）。
• 后端生成一個加密的 Token（比如 JWT），并返回給前端。
• 前端保存 Token，通常會將其存儲在 localStorage 或 sessionStorage。

登錄：

• 用戶提交登錄信息（如用戶名、密碼）。
• 后端驗證用戶憑證是否合法。
• 如果驗證成功，后端返回兩個 Token：一個用于身份驗證的 access_token，另一個用于刷新身份的 refresh_token。
• 前端保存 access_token 和 refresh_token。

access_token 用于 API 請求時攜帶。

refresh_token 用于刷新過期的 access_token。

請求保護接口：

• 前端每次發(fā)起需要認證的請求時，攜帶 access_token（通常放在 HTTP 請求頭中）。
• 后端驗證 access_token，如果有效則返回數(shù)據(jù)；如果無效，后端通過 refresh_token 獲取新的 access_token。

刷新 Token：

• 當 access_token 過期時，前端使用 refresh_token 通過接口請求獲取新的 access_token。
• 后端驗證 refresh_token 是否有效，如果有效則返回新的 access_token。

四、總結

通過雙 Token 機制，可以有效提升應用的安全性，同時保證用戶體驗。

核心在于：

• Token 的獲取與存儲。
• 請求與響應攔截器的實現(xiàn)。
• Token 刷新邏輯的處理。

這種機制適用于需要高安全性的應用場景，如金融、電商等。

前端通過雙 Token（access_token 和 refresh_token）機制處理身份驗證和授權，access_token 用于訪問保護接口，refresh_token 用于在 access_token 過期時刷新認證。

以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

最新評論