Comment implémenter la liste blanche d'interception de requêtes dans vue

Avant-propos

Dans le processus d'utilisation de Vue pour le développement, nous rencontrerons des situations dans lesquelles nous devrons intercepter les requêtes réseau, et nous devons également exclure certaines requêtes de l'interception, c'est-à-dire la mise sur liste blanche. Cet article présentera la méthode d'implémentation de la liste blanche d'interception des requêtes Vue.

Texte

Lors du développement avec Vue, nous utilisons généralement axios pour envoyer des requêtes réseau. Dans axios, nous pouvons personnaliser l'intercepteur de requêtes réseau. Les intercepteurs personnalisés peuvent nous aider à modifier la configuration de la requête avant d'envoyer la requête réseau, ou à traiter les résultats de la réponse après la réponse à la requête.

Utilisation de base de l'intercepteur de requêtes Vue

Dans Vue, nous devons d'abord installer et introduire axios :

npm install axios -S

import axios from 'axios'

Ensuite, nous pouvons configurer axios, définir l'intercepteur de requêtes et l'intercepteur de réponse :

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

Dans l'intercepteur de requêtes L'objet de configuration contient des informations liées à la requête en cours. Nous pouvons modifier cet objet dans l'intercepteur, par exemple en ajoutant des informations d'en-tête de requête, etc.

L'objet de réponse dans l'intercepteur de réponse contient les informations de retour de la requête réseau. Nous pouvons également modifier cet objet, comme juger les codes d'erreur, etc.

Implémentation de la liste blanche d'interception des requêtes Vue

Dans certains scénarios spécifiques, nous ne souhaitons pas intercepter certaines requêtes. Pour le moment, nous devons modifier l'intercepteur de requêtes pour implémenter la fonction de liste blanche.

Dans l'intercepteur de requêtes, nous pouvons décider d'intercepter la requête en cours en jugeant si l'URL de la requête en cours est dans la liste blanche. Ici, nous devons définir une liste blanche et porter un jugement sur l'intercepteur de requêtes :

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

Dans le code ci-dessus, nous définissons d'abord une liste blanche, puis jugeons l'URL actuellement demandée dans l'intercepteur de requêtes si la requête actuelle ne l'est pas. dans la liste blanche et sera intercepté. Dans cet intercepteur, nous avons également ajouté du code logique, comme l'obtention du jeton local, l'ajout du champ Autorisation à l'en-tête de la requête, etc.

Dans le code ci-dessus, si l'URL demandée n'est pas dans la liste blanche, elle sera interceptée, et les opérations suivantes seront effectuées lors de l'interception :

1. Récupérer le token local.
2. Déterminez si le jeton existe localement, sinon, accédez à la page de connexion.
3. S'il y a un jeton, ajoutez le champ Autorisation dans les en-têtes pour le transmettre au backend.

Après avoir terminé les opérations ci-dessus, renvoyez l'objet de configuration traité et la demande continuera à être envoyée.

Résumé

L'application de l'intercepteur de requêtes Vue est très flexible. Grâce à des intercepteurs personnalisés, nous pouvons modifier et intercepter les requêtes réseau à tout moment, en même temps, il implémente également la fonction de liste blanche, c'est-à-dire exclure certaines requêtes. qu'il n'est pas affecté par l'interception. Dans le développement réel d'un projet, la liste blanche d'interception de requêtes est une fonction essentielle, nous devons donc apprendre à personnaliser l'intercepteur d'interception de requêtes pour implémenter la liste blanche de requêtes.

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!