So aktualisieren Sie das Token in Vue

In diesem Artikel erfahren Sie, wie Sie Token in Vue aktualisieren. Der Inhalt ist sehr gut. Ich hoffe, er kann allen helfen.

Token-Authentifizierungsmechanismus

Nachdem die Client-Anmeldeanforderung erfolgreich war, verschlüsselt der Server die Benutzerinformationen (z. B. Benutzer-ID) mithilfe eines speziellen Algorithmus und sendet sie an Wenn der Benutzer das nächste Mal eine Anfrage initiiert, wird dieses Token übermittelt und der Server entschlüsselt das Token zur Überprüfung. Wenn es erfolgreich ist, werden die angeforderten Daten an den Server zurückgegeben Client; andernfalls schlägt die Anfrage fehl.

Vorteile des Tokens

Es ist zustandslos und der Server muss keine Sitzungsinformationen wie bei der herkömmlichen Identitätsauthentifizierung (Sitzung) speichern, was den Druck auf den Server verringert .

Vues Token-Aktualisierungsverarbeitung

Nach einer kurzen Einführung in den Token-Authentifizierungsmechanismus geben Sie den Text ein...

Allgemein Für die Aus Sicherheitsgründen wird für das Token eine Ablaufzeit festgelegt. Nach Ablauf kann die entsprechende Schnittstelle nicht mehr angefordert werden. Was soll ich zu diesem Zeitpunkt tun?

Im aktuellen Projekt des Unternehmens haben wir uns für eine bessere Benutzererfahrung entschieden, den Token manuell zu aktualisieren. Nachdem die Anmeldeanforderung erfolgreich war, werden ein Token und die Token-Ablaufzeit zurückgegeben. Bei jeder Anforderung der API kann das Frontend zunächst feststellen, ob das Token bald abläuft oder abgelaufen ist. Wenn ja, fordern Sie die Aktualisierungstoken-Schnittstelle an und den ursprünglichen Token erfolgreich ersetzen. Erst dann kann die Anforderung erneut gestartet werden.

Als nächstes schauen wir uns direkt den Code an. Dies ist die relevante Operation, die im Anforderungsinterceptor von vue ausgeführt wird:

/*是否有请求正在刷新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)
 }
)

Hier sind einige Punkte zu beachten:

1. Wenn das Token bald abläuft oder abgelaufen ist, benötigen wir im Prinzip nur eine Schnittstelle, um eine Anforderung zum Aktualisieren des Tokens auszulösen Sperren: Wenn der Vorgang zum Aktualisieren des Tokens ausgelöst wird, werden andere Triggervorgänge ausgeschlossen.

window.isRefreshing = false

2. Die Aktualisierungstokenschnittstelle verwendet auch aus Sicherheitsgründen ein anderes Token, das jedoch im Allgemeinen länger ist als das Ablaufdatum gewöhnlicher Token Es dauert lange, daher werden Sie im obigen Code feststellen, dass ich beim Abfangen der Anforderung Priorität habe, ob das Refresh_token abgelaufen ist. Wenn es abläuft, werde ich mich direkt abmelden, ohne mit dem nächsten Schritt fortzufahren.

 /*判断刷新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. Nachdem wir den Vorgang zum Aktualisieren des Tokens ausgelöst haben, müssen wir zuerst andere Anforderungen aussetzen und diese Anforderungen dann erneut initiieren, nachdem wir das neue Token erhalten haben.

/*把请求(token)=>{....}都push到一个数组中*/
let retry = new Promise((resolve, reject) => {
 /*(token) => {...}这个函数就是回调函数*/
 subscribeTokenRefresh((token) => {
  config.headers.Authorization = 'Bearer ' + token
  /*将请求挂起*/
  resolve(config)
 })
})
return retry

Führen Sie den folgenden Code im Erfolgsrückruf der Aktualisierungstokenanforderung aus und initiieren Sie die Anforderung erneut.

 /*执行数组里的函数,重新发起被挂起的请求*/
 onRrefreshed(res.data.data.token)

Da jemand in den Kommentaren nach der Util-Datei gefragt hat, möchte er wahrscheinlich wissen, wie er den Token-Ablauf ermitteln kann. Tatsächlich wird eine Token-Ablaufzeit zurückgegeben Rufen Sie es zuerst auf und nehmen Sie es dann bei Bedarf heraus und vergleichen Sie es mit der Ortszeit

/*判断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
}

Verwandte Empfehlungen:

Detaillierte Analyse von SFC und vue -loader in Vue

So übertragen Sie Werte zwischen übergeordneten und untergeordneten Vue-Komponenten

Das obige ist der detaillierte Inhalt vonSo aktualisieren Sie das Token in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!