前端實現token重新整理

應用場景：在乙個管理系統中，當使用者登入進來後，我們期望使用者在操作時，不會因為token過期而被迫登出。但token是有時效的，這時候我們就需要乙個重新整理token的操作來保障使用者的登入狀態；而當使用者長時間未操作，則可以被登出。

登入，從後台獲取到token（鑑權令牌），refresh_token（重新整理token的令牌），expire_time（token的時效）。將這三個以及登入的時間點（logintime）儲存下來，以備使用。

使用者操作中，向後台傳送請求，每次請求時，將當前請求時間（currenttime）與logintime和expire_time對比，

即（currenttime-logintime）得到的時間段即將接近或超出expire_time時，使用refresh_token去重新獲取token。

注：此處需要知道的是，refresh_token與token一樣，都是有時效的。但refresh_token的時效必定長於token，這樣token即便過期了，也不會影響refresh_token。因此只要使用者在refresh_token的有效期內向後台傳送請求，token就可以一直得到重新整理。

而使用者長時間未操作，refresh_token也過期了，這時候就可以被正常登出。

使用refresh_token去重新獲取token的操作實際上就是再次進行了一次登入操作，只不過這次的引數並非賬密，而是refresh_token，

並且這個操作使用者是不知情的。每次登入獲取到的鑑權資訊都會覆蓋上一次儲存的鑑權資訊，這樣就會確保token和refresh_token一直都是最新的。

大體流程就是以上三個步驟迴圈。

// 請求***

service.interceptors.request.use(

(config: any) =>

// 登入,不校驗token

if (config.url.indexof('/login') > -1) else `

// 掛起請求

resolve(config)

} else if (res === 'pending') , 500)

} else `

clearinterval(interval)

}// 掛起請求

resolve(config)}})

refreshfun()

})return retry}},

error =>

)// 返回***

service.interceptors.response.use(

response =>

return promise.resolve(response.data)

}response.data.msg && message.error(response.data.msg)

return promise.reject(response.data.msg)

},error =>

error.response.data.msg && message.error(error.response.data.msg)

return promise.reject(error)

})export default service as axiosinstance

refreshtoken.ts

import store from '@/store'
export async function refreshtoken()  = json.parse(localstorage.getitem('user_info'))
const splittime = expires_in - (currenttime - logintime) / 1000
if (splittime < 60) 
const refreshtokenstatus = localstorage.getitem('refreshtokenstatus')
// 確保同一時間段內只執行一次
if (!refreshtokenstatus) )
// 請求成功，清除狀態值
localstorage.removeitem('refreshtokenstatus')
return 'success'
} else 
} else 
}}

登入成功，在登入介面的返回***裡記錄登入時間

登出時清除以上所有儲存的鑑權資訊

多介面併發請求，且此時token已經過期。只需要在第乙個介面裡去請求重新整理token，後面的介面先掛起，等到拿到最新的token後,更新請求頭，傳送請求。

做法：定義乙個狀態值，用來確保相近的時間段內不會重複請求重新整理token

長時間未操作，refresh_token過期，使用者登出

這是個人總結一種方式，且已經應用在實際的專案中，暫時未出現問題。其實重新整理token的方式是多種多樣的，例如另一種方式是直接在主頁面寫個定時器，定時重新整理token，這樣較為簡便，但卻不適用於本專案。因此我們需要基於實際情況選擇合適的方式。

前端實現token重新整理

OAuth2 0與前端無感知token重新整理實現

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

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

前端實現token重新整理

OAuth2 0與前端無感知token重新整理實現

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

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

相關推薦