快捷導(dǎo)航

vue的token刷新處理的方法

更新時(shí)間：2018年07月17日 14:38:46 作者：Paranoidyang

這篇文章主要介紹了vue的token刷新處理的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧

第一次接觸token處理，初來乍到，說錯(cuò)的地方還請(qǐng)各位多多指教。

token身份驗(yàn)證機(jī)制

客戶端登錄請(qǐng)求成功后，服務(wù)器將用戶信息（如用戶id）使用特殊算法加密后作為驗(yàn)證的標(biāo)志發(fā)送給用戶（即token），當(dāng)用戶下次發(fā)起請(qǐng)求時(shí)，會(huì)將這個(gè)token捎帶過來，服務(wù)器再將這個(gè)token通過解密后進(jìn)行驗(yàn)證，通過的話，則向客戶端返回請(qǐng)求的數(shù)據(jù)；反之，則請(qǐng)求失敗。

token優(yōu)點(diǎn)

它是無狀態(tài)的，且服務(wù)器不用像傳統(tǒng)的身份認(rèn)證（session）那樣需要保存會(huì)話信息，減輕了服務(wù)器的壓力。

vue的token刷新處理

在對(duì)token身份驗(yàn)證機(jī)制進(jìn)行一次簡(jiǎn)單介紹后，進(jìn)入正文...

一般為了安全性，token都會(huì)設(shè)置一個(gè)過期時(shí)間，在過期之后就無法請(qǐng)求相關(guān)接口了，這時(shí)應(yīng)該怎么辦呢，是直接退出登錄嗎？

在目前公司的項(xiàng)目里，為了更好的用戶體驗(yàn)，我們選擇手動(dòng)刷新token。登錄請(qǐng)求成功后，會(huì)返回一個(gè)token和token過期時(shí)間，在每次請(qǐng)求api時(shí)，前端可以先判斷一下token是否即將過期或已過期，如果是，則請(qǐng)求刷新token的接口，成功替換原來的token之后才可以重新發(fā)起請(qǐng)求。

下面，我們直接看代碼，這是在vue的請(qǐng)求攔截器里進(jìn)行的相關(guān)操作：

/*是否有請(qǐng)求正在刷新token*/
window.isRefreshing = false
/*被掛起的請(qǐng)求數(shù)組*/
let refreshSubscribers = []

/*獲取刷新token請(qǐng)求的token*/
function getRefreshToken () {
 return JSON.parse(localStorage.auth).refresh_token
}

/*push所有請(qǐng)求到數(shù)組中*/
function subscribeTokenRefresh (cb) {
 refreshSubscribers.push(cb)
}

/*刷新請(qǐng)求（refreshSubscribers數(shù)組中的請(qǐng)求得到新的token之后會(huì)自執(zhí)行，用新的token去請(qǐng)求數(shù)據(jù)）*/
function onRrefreshed (token) {
 refreshSubscribers.map(cb => cb(token))
}

/*請(qǐng)求攔截器*/
ajax.interceptors.request.use(
 config => {
  const authTmp = localStorage.auth
  /*判斷是否已登錄*/
  if (authTmp) {
   /*解析登錄信息*/
   let auth = JSON.parse(authTmp)
   /*判斷auth是否存在*/
   if (auth) {
    /*在請(qǐng)求頭中添加token類型、token*/
    config.headers.Authorization = auth.token_type + ' ' + auth.token
    /*判斷刷新token請(qǐng)求的refresh_token是否過期*/
    if (util.isRefreshTokenExpired()) {
     alert('刷新token過期，請(qǐng)重新登錄')
     /*清除本地保存的auth*/
     localStorage.removeItem('auth')
     window.location.href = '#/login'
     return
    }
    /*判斷token是否將要過期*/
    if (util.isTokenExpired() && config.url.indexOf('admin/auth/current') === -1) {
     /*判斷是否正在刷新*/
     if (!window.isRefreshing) {
      /*將刷新token的標(biāo)志置為true*/
      window.isRefreshing = true
      /*發(fā)起刷新token的請(qǐng)求*/
      apiList.refreshToken({refresh_token: getRefreshToken()}).then(res => {
       /*將標(biāo)志置為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))
       /*執(zhí)行數(shù)組里的函數(shù),重新發(fā)起被掛起的請(qǐng)求*/
       onRrefreshed(res.data.data.token)
       /*執(zhí)行onRefreshed函數(shù)后清空數(shù)組中保存的請(qǐng)求*/
       refreshSubscribers = []
      }).catch(err => {
       alert(err.response.data.message)
       /*清除本地保存的auth*/
       // localStorage.removeItem('auth')
       window.location.href = '#/login'
      })
     }
     /*把請(qǐng)求(token)=>{....}都push到一個(gè)數(shù)組中*/
     let retry = new Promise((resolve, reject) => {
      /*(token) => {...}這個(gè)函數(shù)就是回調(diào)函數(shù)*/
      subscribeTokenRefresh((token) => {
       config.headers.Authorization = 'Bearer ' + token
       /*將請(qǐng)求掛起*/
       resolve(config)
      })
     })
     return retry
    }
   }
   return config

  } else {
   /*未登錄直接返回配置信息*/
   return config
  }
 },
 /*錯(cuò)誤操作*/
 err => {
  return Promise.reject(err)
 }
)

這里需要注意幾點(diǎn)：

1、當(dāng)token即將過期或者已過期時(shí)，原則上，我們只需要有一個(gè)接口去觸發(fā)刷新token的請(qǐng)求即可，這里的isRefreshing 變量，就起到這樣一個(gè)監(jiān)控的作用，它相當(dāng)于一把鎖，當(dāng)刷新token的操作被觸發(fā)后，其他的觸發(fā)操作就被排斥在外了。

window.isRefreshing = false

2、刷新token的接口，用到了一個(gè)另外的token（refresh_token），這也是出于安全性考慮的，并且它也有過期時(shí)間，不過這個(gè)過期時(shí)間一般都比普通token的過期時(shí)間要長(zhǎng)，所以在上面代碼中，會(huì)發(fā)現(xiàn)，我在請(qǐng)求攔截中優(yōu)先判斷了refresh_token是否過期，如果過期則直接退出登錄，不再進(jìn)行下一步的操作。

 /*判斷刷新token請(qǐng)求的refresh_token是否過期*/
if (util.isRefreshTokenExpired() && config.url.indexOf('admin/auth/current') === -1) {
 alert('刷新token過期，請(qǐng)重新登錄')
 /*清除本地保存的auth*/
 localStorage.removeItem('auth')
 window.location.href = '#/login'
 return
}

3、在觸發(fā)了刷新token的操作后，我們還需要先將其他的請(qǐng)求掛起，在獲取新的token之后再重新發(fā)起這些請(qǐng)求。

/*把請(qǐng)求(token)=>{....}都push到一個(gè)數(shù)組中*/
let retry = new Promise((resolve, reject) => {
 /*(token) => {...}這個(gè)函數(shù)就是回調(diào)函數(shù)*/
 subscribeTokenRefresh((token) => {
  config.headers.Authorization = 'Bearer ' + token
  /*將請(qǐng)求掛起*/
  resolve(config)
 })
})
return retry

在刷新token請(qǐng)求的成功回調(diào)里執(zhí)行下面代碼，重新發(fā)起請(qǐng)求。

 /*執(zhí)行數(shù)組里的函數(shù),重新發(fā)起被掛起的請(qǐng)求*/
 onRrefreshed(res.data.data.token)

4、因?yàn)橛腥嗽谠u(píng)論里問util文件，應(yīng)該是想知道具體怎么判斷token過期的，其實(shí)在獲得token時(shí)，是有返回一個(gè)token過期時(shí)間，你可以先將它先保存起來，然后在需要時(shí)，拿出來與本地時(shí)間比較即可

/*判斷token是否過期*/
function isTokenExpired() {
 /*從localStorage中取出token過期時(shí)間*/
 let expiredTime = new Date(JSON.parse(localStorage.auth).expired_at).getTime() / 1000
 /*獲取本地時(shí)間*/
 let nowTime = new Date().getTime() / 1000
 /*獲取校驗(yàn)時(shí)間差*/
 let diffTime = JSON.parse(sessionStorage.diffTime)
 /*校驗(yàn)本地時(shí)間*/
 nowTime -= diffTime
 /*如果 < 10分鐘，則說明即將過期*/
 return (expiredTime - nowTime) < 10*60
}

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: