如何實現(xiàn)請求時token過期自動刷新token?相信很多沒有經(jīng)驗的人對此束手無策,為此本文總結(jié)了問題出現(xiàn)的原因和解決方法,通過這篇文章希望你能解決這個問題。
創(chuàng)新互聯(lián):自2013年創(chuàng)立以來為各行業(yè)開拓出企業(yè)自己的“網(wǎng)站建設(shè)”服務(wù),為上千家公司企業(yè)提供了專業(yè)的成都網(wǎng)站建設(shè)、成都做網(wǎng)站、網(wǎng)頁設(shè)計和網(wǎng)站推廣服務(wù), 按需網(wǎng)站策劃由設(shè)計師親自精心設(shè)計,設(shè)計的效果完全按照客戶的要求,并適當?shù)奶岢龊侠淼慕ㄗh,擁有的視覺效果,策劃師分析客戶的同行競爭對手,根據(jù)客戶的實際情況給出合理的網(wǎng)站構(gòu)架,制作客戶同行業(yè)具有領(lǐng)先地位的。1.在開發(fā)過程中,我們都會接觸到token,token的作用是什么呢?主要的作用就是為了安全,用戶登陸時,服務(wù)器會隨機生成一個有時效性的token,用戶的每一次請求都需要攜帶上token,證明其請求的合法性,服務(wù)器會驗證token,只有通過驗證才會返回請求結(jié)果。
2.當token失效時,現(xiàn)在的網(wǎng)站一般會做兩種處理,一種是跳轉(zhuǎn)到登陸頁面讓用戶重新登陸獲取新的token,另外一種就是當檢測到請求失效時,網(wǎng)站自動去請求新的token,第二種方式在app保持登陸狀態(tài)上面用得比較多。
3.下面進入主題,我們請求用的是axios,不管用何種請求方式,刷新token的原理都是一樣的。
//封裝了一個統(tǒng)一的請求函數(shù),這個不是重點
export default function request(url, options) { const token = localStorage.getItem('token'); const defaultOptions = { headers: { Authorization: `Bearer ${token}`, }, withCredentials: true, url: url, baseURL: BASE_URL, }; const newOptions = { ...options, ...defaultOptions }; return axios.request(newOptions) .then(checkStatus) .catch(error => console.log(error)); }