vue中token如何進行刷新處理
- 不言原創
- 2018-07-21 11:57:373027瀏覽
這篇文章跟大家分享的是關於vue中token如何進行刷新處理，內容很不錯，有需要的朋友可以參考一下，希望可以幫助到大家。
token身份驗證機制
客戶端登入要求成功後，伺服器將用戶資訊（如用戶id）使用特殊演算法加密後作為驗證的標誌傳送給用戶（即token），當用戶下次發起請求時，會將這個token捎帶過來，伺服器再將這個token通過解密後進行驗證，通過的話，則向客戶端返回請求的資料；反之，則請求失敗。
token優點
它是無狀態的，且伺服器不用像傳統的身份認證（session）那樣需要保存會話信息，減輕了伺服器的壓力。
vue的token刷新處理
在對token身份驗證機制進行一次簡單介紹後，進入正文...
一般為了安全性，token都會設定一個過期時間，在過期之後就無法請求相關介面了，這時該怎麼辦呢，是直接退出登入嗎？
在目前公司的專案裡，為了更好的使用者體驗，我們選擇手動刷新token。登入請求成功後，會返回一個token和token過期時間，在每次請求api時，前端可以先判斷一下token是否即將過期或已過期，如果是，則請求刷新token的接口，成功替換原來的token之後才可以重新發起請求。
下面，我們直接看程式碼，這是在vue的請求攔截器裡進行的相關操作：
/*是否有请求正在刷新token*/
window.isRefreshing = false
/*被挂起的请求数组*/
let refreshSubscribers = []
/*获取刷新token请求的token*/
function getRefreshToken () {
return JSON.parse(localStorage.auth).refresh_token
}
/*push所有请求到数组中*/
function subscribeTokenRefresh (cb) {
refreshSubscribers.push(cb)
}
/*刷新请求（refreshSubscribers数组中的请求得到新的token之后会自执行，用新的token去请求数据）*/
function onRrefreshed (token) {
refreshSubscribers.map(cb => cb(token))
}
/*请求拦截器*/
ajax.interceptors.request.use(
config => {
const authTmp = localStorage.auth
/*判断是否已登录*/
if (authTmp) {
/*解析登录信息*/
let auth = JSON.parse(authTmp)
/*判断auth是否存在*/
if (auth) {
/*在请求头中添加token类型、token*/
config.headers.Authorization = auth.token_type + ' ' + auth.token
/*判断刷新token请求的refresh_token是否过期*/
if (util.isRefreshTokenExpired()) {
alert('刷新token过期，请重新登录')
/*清除本地保存的auth*/
localStorage.removeItem('auth')
window.location.href = '#/login'
return
}
/*判断token是否将要过期*/
if (util.isTokenExpired() && config.url.indexOf('admin/auth/current') === -1) {
/*判断是否正在刷新*/
if (!window.isRefreshing) {
/*将刷新token的标志置为true*/
window.isRefreshing = true
/*发起刷新token的请求*/
apiList.refreshToken({refresh_token: getRefreshToken()}).then(res => {
/*将标志置为false*/
window.isRefreshing = false
/*成功刷新token*/
config.headers.Authorization = res.data.data.token_type + ' ' + res.data.data.token
/*更新auth*/
localStorage.setItem('auth', JSON.stringify(res.data.data))
/*执行数组里的函数,重新发起被挂起的请求*/
onRrefreshed(res.data.data.token)
/*执行onRefreshed函数后清空数组中保存的请求*/
refreshSubscribers = []
}).catch(err => {
alert(err.response.data.message)
/*清除本地保存的auth*/
// localStorage.removeItem('auth')
window.location.href = '#/login'
})
}
/*把请求(token)=>{....}都push到一个数组中*/
let retry = new Promise((resolve, reject) => {
/*(token) => {...}这个函数就是回调函数*/
subscribeTokenRefresh((token) => {
config.headers.Authorization = 'Bearer ' + token
/*将请求挂起*/
resolve(config)
})
})
return retry
}
}
return config
} else {
/*未登录直接返回配置信息*/
return config
}
},
/*错误操作*/
err => {
return Promise.reject(err)
}
)這裡需要注意幾點：
1、當token即將過期或已過期時，原則上，我們只需要有一個接口去觸發刷新token的請求即可，這裡的isRefreshing 變量，就起到這樣一個監控的作用，它相當於一把鎖，當刷新token的操作被觸發後，其他的觸發操作就被排斥在外了。
window.isRefreshing = false
2、刷新token的接口，用到了一個另外的token（refresh_token），這也是出於安全性考慮的，並且它也有過期時間，不過這個過期時間一般都比普通token的過期時間要長，所以在上面程式碼中，會發現，我在請求攔截中優先判斷了refresh_token是否過期，如果過期則直接退出登錄，不再進行下一步的操作。
/*判断刷新token请求的refresh_token是否过期*/
if (util.isRefreshTokenExpired() && config.url.indexOf('admin/auth/current') === -1) {
alert('刷新token过期，请重新登录')
/*清除本地保存的auth*/
localStorage.removeItem('auth')
window.location.href = '#/login'
return
}3、在觸發了刷新token的操作後，我們還需要先將其他的請求掛起，在取得新的token之後再重新發起這些請求。
/*把请求(token)=>{....}都push到一个数组中*/
let retry = new Promise((resolve, reject) => {
/*(token) => {...}这个函数就是回调函数*/
subscribeTokenRefresh((token) => {
config.headers.Authorization = 'Bearer ' + token
/*将请求挂起*/
resolve(config)
})
})
return retry在刷新token請求的成功回呼裡執行下面程式碼，重新發起請求。
/*执行数组里的函数,重新发起被挂起的请求*/ onRrefreshed(res.data.data.token)
4、因為有人在評論裡問util文件，應該是想知道具體怎麼判斷token過期的，其實在獲得token時，是有返回一個token過期時間，你可以先將它先保存起來，然後在需要時，拿出來與本地時間比較即可
/*判断token是否过期*/
function isTokenExpired() {
/*从localStorage中取出token过期时间*/
let expiredTime = new Date(JSON.parse(localStorage.auth).expired_at).getTime() / 1000
/*获取本地时间*/
let nowTime = new Date().getTime() / 1000
/*获取校验时间差*/
let diffTime = JSON.parse(sessionStorage.diffTime)
/*校验本地时间*/
nowTime -= diffTime
/*如果 < 10分钟，则说明即将过期*/
return (expiredTime - nowTime) < 10*60
}相關推薦：
以上是vue中token如何進行刷新處理的詳細內容。更多資訊請關注PHP中文網其他相關文章！