Detaillierte grafische Erklärung der Verwendung von Axios Interceptor in Vue

Dieses Mal werde ich Ihnen eine detaillierte Erklärung der Verwendung von Axios Interceptor in Vue mit Bildern und Texten geben. Was sind die Vorsichtsmaßnahmen bei der Verwendung von Axios Interceptor in Vue? Schauen Sie mal rein.

axios in vue unterstützt die Deklarationsmethode vue.use() nicht. Es gibt also zwei Möglichkeiten, dieses Problem zu lösen:

Die erste: Eingeführt in main.js Axios, und legen Sie es dann als Eigenschaft in der Vue-Prototypkette fest, sodass this.axios direkt in der Komponente

import axios from 'axios';
Vue.prototype.axios=axios;

components:

this.axios({
    url:"a.xxx",
    method:'post',
    data:{
      id:3,
      name:'jack'
    }
  })
  .then(function(res){
    console.log(res);
  })
  .catch(function(err){
    console.log(err);
  })
 }

Hier ist zu beachten, dass es ungültig ist, die angeforderten Daten in Axios zu kopieren. Sie können Pfeilfunktionen verwenden, um dieses Problem zu lösen.

Das domänenübergreifende Problem des lokalen Proxys, wenn das Vue-CLI-Gerüst-Front-End die Back-End-Datenschnittstelle anpasst, greife ich beispielsweise auf die Schnittstelle auf localhost http://10.1.5.11:8080/xxx/ zu. Duty?time=2017-07- 07 14:57:22', es muss domänenübergreifend darauf zugegriffen werden. Bei direktem Zugriff wird XMLHTTPRequest nicht geladen gemeldet http://10.1.5.11:8080/xxx/duty?time= 07.07.2017 14: 57:22'. Die Antwort auf die Preflight-Anfrage besteht die Zugriffskontrolle nicht.

Warum gibt es ein domänenübergreifendes Problem? Da es sich hierbei um eine nicht-originale Kommunikation handelt, können Sie zu Google gehen, um mehr darüber zu erfahren. Hier müssen Sie nur index.js in der Konfiguration finden:

config /index.js

dev: {
  proxyTable: {
   '/api': {
    target: 'http://10.1.5.11:8080/',//设置你调用的接口域名和端口号 
    changeOrigin: true,   //跨域
    pathRewrite: {
     '^/api': '/'     //这里理解成用‘/api'代替target里面的地址，后面组件中我们掉接口时直接用api代替 比如我要调用'http://10.1.5.11:8080/xxx/duty?time=2017-07-07 14:57:22'，直接写‘/api/xxx/duty?time=2017-07-07 14:57:22'即可
    }
   }

Das domänenübergreifende Problem ist erfolgreich, aber dies löst das domänenübergreifende Problem nur in der Entwicklungsumgebung (dev), wenn es tatsächlich bereitgestellt wird Auf dem Server treten immer noch domänenübergreifende Probleme auf, wenn er nicht vom gleichen Ursprung ist, z. B. Der von uns bereitgestellte Server-Port ist 3001, was im ersten Schritt ein gemeinsames Debuggen von Front-End und Back-End erfordert Testen Sie das Front-End in zwei Umgebungen: In config/dev.env.js und prod.env.js konfigurieren Sie die angeforderte Adresse API_HOST in der Entwicklungsumgebung. Wir verwenden die oben konfigurierte Proxy-Adressen-API. In der Produktionsumgebung verwenden wir die normale Schnittstellenadresse. Nehmen Sie daher die folgenden Konfigurationen in den beiden .js-Dateien vor.

config/dev.env.js:

module.exports = merge(prodEnv, {
 NODE_ENV: '"development"',//开发环境
 API_HOST:"/api/"
})

prod.env.js

module.exports = {
 NODE_ENV: '"production"',//生产环境
 API_HOST:'"http://10.1.5.11:8080/"'
}

Von Kurs Unabhängig davon, ob es sich um eine Entwicklungs- oder Produktionsumgebung handelt, können Sie direkt http://10.1.5.11:8080// anfordern. Nach der Konfiguration ermittelt das Programm beim Testen automatisch, ob es sich bei der aktuellen Umgebung um eine Entwicklungs- oder Produktionsumgebung handelt, und stimmt dann automatisch mit API_HOST überein. Wir können in jeder Komponente die Adresse „process.env.API_HOST“ verwenden, z. B.:

instance.post(process.env.API_HOST+'user/login', this.form)

und dann Im zweiten Schritt kann der Backend-Server Cros domänenübergreifend konfigurieren, was access-control-allow-origin: * bedeutet, allen Zugriff zuzulassen. Zusammenfassend lässt sich sagen: In der Entwicklungsumgebung kann unser Front-End einen domänenübergreifenden Proxy-Agenten konfigurieren. In einer realen Produktionsumgebung benötigen wir weiterhin die Zusammenarbeit mit dem Back-End. Ein bestimmter Experte sagte: Diese Methode ist in IE9 und darunter nicht einfach zu verwenden. Wenn Kompatibilität erforderlich ist, besteht der beste Weg darin, einen Proxy zum Server-Port im Backend hinzuzufügen. Der Effekt ähnelt dem des Webpack-Proxys.

axios sendet get Post-Anfrage Problem

Beim Senden einer Post-Anfrage wird im Allgemeinen Content-Type festgelegt, die Art des zu sendenden Inhalts , application/json Es bedeutet, ein JSON-Objekt zu senden, es aber im Voraus zu stringisieren. application/xxxx-form bezieht sich auf das Senden? Für das Format a=b&c=d können Sie die qs-Methode zum Formatieren verwenden. qs wird nach der Installation von axios automatisch installiert.

const postData=JSON.stringify(this.formCustomer);
'Content-Type':'application/json'}
const postData=Qs.stringify(this.formCustomer);//过滤成？&=格式
'Content-Type':'application/xxxx-form'}

Einsatz von Abfangjägern

Wenn wir eine Adressseite besuchen, werden wir manchmal gebeten, uns erneut anzumelden, bevor wir auf die Seite zugreifen. Die Seite, also die Identitätsauthentifizierung, ist fehlgeschlagen, z. B. weil das Token verloren gegangen ist oder das Token noch lokal existiert, aber abgelaufen ist. Daher kann das Problem nicht einfach durch die Beurteilung, ob ein lokaler Tokenwert vorhanden ist, gelöst werden. Zu diesem Zeitpunkt gibt der Server bei der Anforderung einen 401-Fehler zurück, der auf einen Autorisierungsfehler hinweist, dh es besteht kein Recht, auf die Seite zuzugreifen.

Wir können diese Situation filtern, bevor wir alle Anfragen senden und bevor wir die Serverantwortdaten manipulieren.

// http request 请求拦截器，有token值则配置上token值
axios.interceptors.request.use(
  config => {
    if (token) { // 每次发送请求之前判断是否存在token，如果存在，则统一在http请求的header都加上token，不用每次请求都手动添加了
      config.headers.Authorization = token;
    }
    return config;
  },
  err => {
    return Promise.reject(err);
  });
// http response 服务器响应拦截器，这里拦截401错误，并重新跳入登页重新获取token
axios.interceptors.response.use(
  response => {
    return response;
  },
  error => {
    if (error.response) {
      switch (error.response.status) {
        case 401:
          // 这里写清除token的代码
          router.replace({
            path: 'login',
            query: {redirect: router.currentRoute.fullPath}  //登录成功后跳入浏览的当前页面
          })
      }
    }
    return Promise.reject(error.response.data) 
  });

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website.

Empfohlene Lektüre:

So implementieren Sie die Sternennavigationsleiste mit JS

Wie vue und vue-i18n den Hintergrund implementieren Daten Mehrsprachige Umschaltung

Das obige ist der detaillierte Inhalt vonDetaillierte grafische Erklärung der Verwendung von Axios Interceptor in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!