Explication graphique détaillée de l'utilisation de l'intercepteur axios dans vue

Cette fois, je vais vous apporter une explication détaillée de l'utilisation de l'intercepteur axios en vue avec des images et des textes. Quelles sont les précautions lors de l'utilisation de l'intercepteur axios en vue. Ce qui suit est un cas pratique, voyons. jetez un oeil.

axios dans vue ne prend pas en charge la méthode de déclaration vue.use(). Il y a donc deux façons de résoudre ce problème :

La première : Introduit dans main.js axios, puis définissez-le comme propriété sur la chaîne de prototype vue, afin que this.axios puisse être utilisé directement dans le composant

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

composants :

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

Une chose à noter ici est qu'il n'est pas valide de l'utiliser pour copier les données demandées dans les données d'axios. Vous pouvez utiliser les fonctions fléchées pour résoudre ce problème.

Le problème inter-domaines du proxy local lorsque le front-end de l'échafaudage vue cli ajuste l'interface de données back-end, par exemple, j'accède à l'interface sur localhost http://10.1.5.11:8080/xxx/ duty?time=2017-07- 07 14:57:22', il doit être accessible sur tous les domaines. En cas d'accès direct, XMLHTTPRequest ne peut pas être chargé sera signalé http://10.1.5.11:8080/xxx/duty?time=. 2017-07-07 14 : 57:22'. La réponse à la demande de contrôle en amont ne passe pas le contrôle d'accès….

Pourquoi y a-t-il un problème inter-domaines ? Comme il s'agit d'une communication non originale, vous pouvez aller sur Google pour en savoir plus. Ici, il vous suffit de configurer proxyTable dans webpack. Recherchez index.js dans la configuration comme suit :

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'即可
    }
   }

Le problème inter-domaines est réussi, mais cela ne résout le problème inter-domaines dans l'environnement de développement (dev) que s'il est réellement déployé. sur le serveur, il y aura toujours des problèmes inter-domaines s'il ne provient pas de la même origine, comme le port du serveur que nous avons déployé est 3001, ce qui nécessite un débogage conjoint front-end et back-end. Dans un premier temps, nous pouvons. tester le front-end dans deux environnements : production et développement. Dans config/dev.env.js et prod.env.js, c'est développement / Dans l'environnement de production, configurez respectivement l'adresse demandée API_HOST. nous utilisons l'API d'adresse proxy configurée ci-dessus. Dans l'environnement de production, nous utilisons l'adresse d'interface normale, donc configurez-la respectivement dans config/dev.env.js et prod.env. Effectuez les configurations suivantes dans les deux fichiers .js.

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/"'
}

De cours Qu'il s'agisse d'un environnement de développement ou de production, vous pouvez directement demander http://10.1.5.11:8080//. Après la configuration, le programme déterminera automatiquement si l'environnement actuel est en développement ou en production pendant les tests, puis fera automatiquement correspondre API_HOST. Nous pouvons utiliser process.env.API_HOST dans n'importe quel composant pour utiliser l'adresse, telle que :

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

.

puis Dans la deuxième étape, le serveur backend peut configurer cros cross-domain, ce qui est access-control-allow-origin : * signifie autoriser tous les accès. Pour résumer : dans l'environnement de développement, notre front-end peut configurer un agent proxy pour inter-domaines. Dans un environnement de production réel, nous avons toujours besoin de la coopération du back-end. Un certain expert a déclaré : Cette méthode n'est pas facile à utiliser dans ie9 et versions antérieures. Si la compatibilité est requise, le meilleur moyen est d'ajouter un proxy au port du serveur sur le backend. L'effet est similaire au proxy webpack pendant le développement.

axios envoie obtenir demande de publication Problème

Lors de l'envoi d'une demande de publication, Content-Type est généralement défini, le type de contenu à envoyer , application/json Cela signifie envoyer un objet json mais le chaîner à l'avance. application/xxxx-form fait référence à l'envoi ? Pour le format a=b&c=d, vous pouvez utiliser la méthode qs pour le formater. qs sera installé automatiquement après l'installation d'axios. Il vous suffit de l'importer dans le composant.

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

Utilisation d'intercepteurs

Lorsque nous visitons une page d'adresse, il nous est parfois demandé de nous reconnecter avant d'accéder à la page. La page, c'est-à-dire l'authentification de l'identité, a échoué, par exemple, le jeton est perdu ou le jeton existe toujours localement, mais il a expiré, donc le simple fait de juger s'il existe une valeur de jeton local ne peut pas résoudre le problème. À ce stade, le serveur renvoie une erreur 401 lors de la demande, indiquant une erreur d'autorisation, c'est-à-dire qu'il n'y a aucun droit d'accéder à la page.

Nous pouvons filtrer cette situation avant d'envoyer toutes les requêtes et avant de manipuler les données de réponse du serveur.

// 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) 
  });

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Comment implémenter la barre de navigation étoilée avec JS

Comment vue et vue-i18n implémentent l'arrière-plan données Commutation multilingue

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!