How to request interception in vuejs

Vuejs request interception method: 1. Create a utils folder under the src folder; 2. Create request.js and auth.js files under the folder; 3. Download axios; 4. Create an instance implementation Just request interception.

The operating environment of this article: Windows 7 system, Vue version 2.9.6, DELL G3 computer.

How does vuejs request interception?

The specific code for vue data request interception

Create the utils file in the src folder Folder

At the same time, create request.js and auth.js files under the folder

request.js is the main entrance for request interception and request data encapsulation
auth.js encapsulates the main entrance for setting tokens, deleting tokens and determining whether the user is logged in

auth.js (encapsulating token)

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

Download axios( Command: npm install axios --save-dev), and introduce axios and getToken

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

Create an instance: pass two parameters (timeout (timeout time), baseUrl (server path))

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

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

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

Recommended learning: "vue tutorial"

The above is the detailed content of How to request interception in vuejs. For more information, please follow other related articles on the PHP Chinese website!