So implementieren Sie die Whitelist zum Abfangen von Anfragen in Vue

Vorwort

Während der Entwicklung mit Vue werden wir auf Situationen stoßen, in denen wir Netzwerkanfragen abfangen müssen, und wir müssen auch einige Anfragen vom Abfangen ausschließen, also auf die Whitelist setzen. In diesem Artikel wird die Methode zur Implementierung der Whitelist zum Abfangen von Vue-Anfragen vorgestellt.

Text

Bei der Entwicklung mit Vue verwenden wir normalerweise Axios, um Netzwerkanfragen zu senden. In Axios können wir den Interceptor von Netzwerkanfragen anpassen. Benutzerdefinierte Interceptoren können uns dabei helfen, die Anforderungskonfiguration vor dem Senden der Netzwerkanforderung zu ändern oder die Antwortergebnisse nach der Anforderungsantwort zu verarbeiten.

Grundlegende Verwendung des Vue-Anforderungs-Interceptors

In Vue müssen wir zuerst Axios installieren und einführen:

npm install axios -S

import axios from 'axios'

Dann können wir Axios einrichten, den Anforderungs-Interceptor und den Antwort-Interceptor festlegen:

axios.interceptors.request.use(
  config => {
    // 在请求发送之前做一些事情
    return config;
  },
  error => {
    // 处理请求错误时做一些事情
    return error;
});
 
axios.interceptors.response.use(
  response => {
    // 处理响应数据做一些事情
    return response;
  },
  error => {
    // 处理响应错误做一些事情
    return error;
});

Im Anforderungs-Interceptor Das Konfigurationsobjekt enthält Informationen zur aktuellen Anfrage. Wir können dieses Objekt im Interceptor ändern, z. B. einige Anfrage-Header-Informationen hinzufügen usw.

Das Antwortobjekt im Antwort-Interceptor enthält die Rückgabeinformationen der Netzwerkanforderung. Wir können dieses Objekt auch ändern, z. B. zur Beurteilung von Fehlercodes usw.

Vue-Request-Interceptor-Implementierung

In einigen spezifischen Szenarien möchten wir bestimmte Anfragen nicht abfangen. Zu diesem Zeitpunkt müssen wir den Request-Interceptor ändern, um die Whitelist-Funktion zu implementieren.

Im Anfrage-Interceptor können wir entscheiden, ob die aktuelle Anfrage abgefangen werden soll, indem wir beurteilen, ob sich die URL der aktuellen Anfrage in der Whitelist befindet. Hier müssen wir eine Whitelist-Liste definieren und im Anforderungs-Interceptor eine Beurteilung vornehmen:

const whitelist = ['/login', '/register']; // 定义白名单
axios.interceptors.request.use(
  config => {
    // 在请求发送之前做一些事情
    if (whitelist.indexOf(config.url) === -1) { // 当前请求不在白名单之中，进行拦截
      const token = localStorage.getItem('token');
      if (token) {
        config.headers.Authorization = token;
      } else {
        window.location.href = '/login';
      }
    }
    return config;
  },
  error => {
    // 处理请求错误时做一些事情
    return error;
});

Im obigen Code definieren wir zunächst eine Whitelist-Liste und beurteilen dann die aktuell angeforderte URL im Anforderungs-Interceptor in der Whitelist und wird abgefangen. In diesem Interceptor haben wir auch einige Logikcodes hinzugefügt, z. B. das Abrufen des lokalen Tokens, das Hinzufügen des Autorisierungsfelds zum Anforderungsheader usw.

Wenn sich im obigen Code die angeforderte URL nicht in der Whitelist befindet, wird sie abgefangen und die folgenden Vorgänge werden während des Abfangens ausgeführt:

1. Holen Sie sich das lokale Token.
2. Stellen Sie fest, ob das Token lokal vorhanden ist. Wenn nicht, springen Sie zur Anmeldeseite.
3. Wenn ein Token vorhanden ist, fügen Sie das Autorisierungsfeld in den Kopfzeilen hinzu, um es an das Backend zu übergeben.

Nach Abschluss der oben genannten Vorgänge geben Sie das verarbeitete Konfigurationsobjekt zurück und die Anfrage wird weiterhin gesendet.

Zusammenfassung

Die Anwendung des Vue-Anfrage-Interceptors ist sehr flexibel. Durch benutzerdefinierte Interceptoren können wir Netzwerkanfragen jederzeit ändern und abfangen. Gleichzeitig wird auch die Whitelist-Funktion implementiert, d. h. bestimmte Anfragen werden ausgeschlossen dass es vom Abfangen nicht betroffen ist. In der tatsächlichen Projektentwicklung ist das Whitelisting zum Abfangen von Anfragen eine wesentliche Funktion. Daher müssen wir lernen, wie wir den Interceptor zum Abfangen von Anfragen anpassen, um das Whitelisting von Anfragen zu implementieren.

Das obige ist der detaillierte Inhalt vonSo implementieren Sie die Whitelist zum Abfangen von Anfragen in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!