Comment demander une interception dans vuejs

Méthode d'interception des requêtes Vuejs : 1. Créez un dossier utils sous le dossier src ; 2. Créez les fichiers request.js et auth.js sous le dossier ; 3. Téléchargez axios ; 4. Créez une instance pour implémenter l'interception des requêtes.

L'environnement d'exploitation de cet article : système Windows 7, Vue version 2.9.6, ordinateur DELL G3.

Comment vuejs demande-t-il l'interception ?

Le code spécifique pour l'interception des demandes de données vue

Créez un dossier utils sous le dossier src

En même temps, créez request.js et auth.js fichiers sous le dossier

request.js est l'entrée principale pour l'interception des demandes et l'encapsulation des données des demandes
auth.js est l'entrée principale pour définir les jetons, supprimer les jetons et déterminer si l'utilisateur est connecté

auth.js ( jeton d'encapsulation)

export function isLogin() {
  if (localStorage.getItem('token')) {
   return true;
  } else {
   return false;
  }
 }
 export function getToken() {
  return localStorage.getItem('token');
 }
 export function setToken(token) {
  localStorage.setItem('token', token);
 }
 
 export function removeToken() {
  localStorage.removeItem('token');
 }

Téléchargez axios (commande : npm install axios --save-dev), et introduisez axios, getToken

import axios from 'axios';
import { getToken } from './auth';

Créez une instance : passez deux paramètres (timeout (timeout time), baseUrl (chemin du serveur))

const instance = axios.create({
   timeout: 5000,
   baseURL: 'https://xxxxxxxxx/xxxx/',
 });

Demande d'interception

// 请求拦截
 instance.interceptors.request.use(
  function(config) {
   // eslint-disable-next-line prettier/prettier
   config.headers.authorization = 'Bearer ' + getToken();
   return config;
  },
  function(error) {
   // Do something with request error
   return Promise.reject(error);
  }
 );
 
 instance.interceptors.response.use(
  response => {
   return response;
  },
  error => {
   if (error.response.status == 401) {
    window.location.href = '/#/login';
   }
   if (error.response.status == 404) {
    window.location.href = '/404.html';
   }
   return Promise.reject(error.response.data);
  }
 );

Demande d'encapsulation

 /**
  * 获取数据 get请求
  * @param {*} url
  * @param {*} config
  */
 export const get = (url, config) => instance.get(url, config);
 
 /**
  * post请求
  * @param {*} url
  * @param {*} data
  * @param {*} config
  */
 export const post = (url, data) => instance.post(url, data);
 /**
  * put
  * @param {*} url
  * @param {*} data
  * @param {*} config
  */
 export const put = (url, data, config) => instance.put(url, data, config);
 
 /**
  * delete
  * @param {*} url
  * @param {*} config
  */
 export const remove = (url, config) => instance.delete(url, config);

Apprentissage recommandé : "tutoriel vue"

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!