Wie kann ich Interceptoren im Vue-Netzwerk anfordern?

Dieser Artikel stellt hauptsächlich die praktische Anwendung von Interceptoren in Vue-Netzwerkanfragen vor. Jetzt teile ich ihn mit Ihnen und gebe Ihnen eine Referenz.

Projekthintergrund

Kürzlich bin ich während der Projektentwicklung auf das folgende Problem gestoßen:

1. Vorher in Bearbeitung Minggan funktioniert, jede Anfrage muss einen Token enthalten, aber der Token hat eine Gültigkeitsdauer. Nach Ablauf des Tokens müssen Sie ihn gegen einen neuen Token eintauschen und die Anfrage fortsetzen.

Anforderungsanalyse

1. Jede Anfrage muss ein Token enthalten, damit wir den Axios-Request-Interceptor verwenden können. Hier geben wir jedem ein Token für alle Anfragen, so dass Sie sich das Kopieren und Einfügen von Code für jede Anfrage immer wieder sparen können.

2. Token-Ungültigkeitsproblem Wenn unser Token abläuft, gibt unser Server eine bestimmte Fehlermeldung zurück, z. B. „Token ungültig“, aber wir können das Token nicht nach jeder Anfrage aktualisieren Verwenden Sie den Axios-Antwort-Interceptor. Nachdem die Anfrage erfolgreich war, verarbeiten wir alle Antwortdaten einheitlich, verarbeiten dann die speziellen Daten und verteilen den Rest normal.

Funktionsimplementierung

Nachdem wir das Problem analysiert haben, implementieren wir die Funktion

Installieren Sie Axios, hier werden wir es tun Beschreiben Sie, wie man Axios installiert.

Axios in main.js registrieren

Vue.use(Vuex)
Vue.use(VueAxios, axios)
Vue.use(qs)

Hinweis: Zur Verwendung ist qs erforderlich axios Wir müssen qs installieren. Für alle Post-Anfragen benötigen wir qs, um Parameter zu serialisieren.

Implementiert im Anfrage-Interceptor

axios.interceptors.request.use(
 config => {
  config.baseURL = '/api/'
  config.withCredentials = true // 允许携带token ,这个是解决跨域产生的相关问题
  config.timeout = 2500
  let token = sessionStorage.getItem('access_token')
  let csrf = store.getters.csrf
  if (token) {
   config.headers = {
    'access-token': token,
    'Content-Type': 'application/x-www-form-urlencoded'
   }
  }
  if (config.url === 'refresh') {
   config.headers = {
    'refresh-token': sessionStorage.getItem('refresh_token'),
    'Content-Type': 'application/x-www-form-urlencoded'
   }
  }
  return config
 },
 error => {
  return Promise.reject(error)
 }
)

Implementiert im Antwort-Interceptor

axios.interceptors.response.use(
 response => {
  // 定时刷新access-token
  if (!response.data.value && response.data.data.message === 'token invalid') {
   // 刷新token
   store.dispatch('refresh').then(response => {
    sessionStorage.setItem('access_token', response.data)
   }).catch(error => {
    throw new Error('token刷新' + error)
   })
  }
  return response
 },
 error => {
  return Promise.reject(error)
 }
)

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

Vue implementiert eine Hervorhebungsmethode für Etikettenklicks

Hervorhebung der Einstellungsmethode für die Vue-Routing-Navigationsmenüleiste

Vier Möglichkeiten zur Implementierung der bidirektionalen Bindung in Vue

Das obige ist der detaillierte Inhalt vonWie kann ich Interceptoren im Vue-Netzwerk anfordern?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!