Heim > Artikel > Web-Frontend > 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);
“
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!