Vue实现数据请求拦截

本文实例为大家分享了vue数据请求拦截的具体代码，供大家参考，具体内容如下

在src文件夹下创建utils文件夹

同时在文件夹下创建request.js和auth.js文件

request.js为请求拦截、请求数据封装主入口
auth.js为设置token和删除token及判断用户是否登录封装主入口 

auth.js (封装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');
}

下载axios(命令: npm install axios --save-dev)、同时引入axios、getToken

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

创建实例：传两个参数（timeout（超时时间）、baseUrl（服务器路径））

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

请求拦截

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

请求封装

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

来源：https://blog.csdn.net/TiAmo_907/article/details/102635463