So beantragen Sie das Abfangen in Vuejs

Vuejs-Anforderungsabfangmethode: 1. Erstellen Sie einen Ordner „utils“ unter dem Ordner „src“. 3. Laden Sie axios herunter.

Die Betriebsumgebung dieses Artikels: Windows 7-System, Vue Version 2.9.6, DELL G3-Computer. Wie fordert VueJS das Abfangen an? Dateien im Ordner

request.js ist der Haupteingang zum Abfangen von Anforderungen und zur Kapselung von Anforderungsdaten auth.js ist der Haupteingang zum Festlegen von Token, Löschen von Token und Feststellen, ob der Benutzer angemeldet ist

auth.js ( Kapselungstoken)

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

Axios herunterladen (Befehl: npm install axios --save-dev) und Axios einführen, getToken

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

Eine Instanz erstellen: zwei Parameter übergeben (Timeout (Timeout-Zeit), baseUrl (Serverpfad))

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

Interception anfordern

// 请求拦截
 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);
  }
 );

Kapselung anfordern

 /**
  * 获取数据 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);

Empfohlenes Lernen: „vue-Tutorial

“

Das obige ist der detaillierte Inhalt vonSo beantragen Sie das Abfangen in Vuejs. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!