Heim  >  Artikel  >  Web-Frontend  >  So beantragen Sie das Abfangen in Vuejs

So beantragen Sie das Abfangen in Vuejs

藏色散人
藏色散人Original
2021-09-18 15:50:113209Durchsuche

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

So beantragen Sie das Abfangen in Vuejs

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!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn