請求時token過期自動重新整理token

1.在開發過程中，我們都會接觸到token，token的作用是什麼呢？主要的作用就是為了安全，使用者登陸時，伺服器會隨機生成乙個有時效性的token,使用者的每一次請求都需要攜帶上token，證明其請求的合法性，伺服器會驗證token，只有通過驗證才會返回請求結果。

3.下面進入主題，我們請求用的是axios，不管用何種請求方式，重新整理token的原理都是一樣的。

//封裝了乙個統一的請求函式，這個不是重點

export default function request(url, options) `,
},withcredentials: true,
url: url,
baseurl: base_url,
};const newoptions = ;
return axios.request(newoptions)
.then(checkstatus)
.catch(error => console.log(error));
}

// 封裝了乙個檢測返回結果的函式，與後台返回狀態碼code === 1002表示token失效

let isrefreshing = true;
function checkstatus(response) 
isrefreshing = false;
// 這個promise函式很關鍵
const retryoriginalrequest = new promise((resolve) => )
});return retryoriginalrequest;
}else
}

// 重新整理token的請求函式

function refreshtokenrequst()
axios.request().then((response)=>);
}

// promise函式集合

let subscribers = ;
function onaccesstokenfetched() )
subscribers = ;
}function addsubscriber(callback)

總結：其實token失效，自動重新整理token，在頁面只有乙個請求的時候是比較好處理的，但是如果頁面同時有多個請求，並且都會產生token失效，這就需要一些稍微複雜的處理，解決方式主要是用了promise 函式來進行處理。每乙個token失效的請求都會存到乙個promise函式集合裡面，當重新整理token的函式執行完畢後，才會批量執行這些promise函式，返回請求結果。還有一點要注意一下，這兒設定乙個重新整理token的開關isrefreshing，這個是非常有必要的，防止重複請求。

請求時token過期自動重新整理token

請求時token過期自動重新整理token

token過期自動跳轉到登入頁面

vue 發出請求時帶token

請求時token過期自動重新整理token

請求時token過期自動重新整理token

token過期自動跳轉到登入頁面

vue 發出請求時帶token

相關推薦