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

以上是 Vue实现数据请求拦截 的全部内容, 来源链接: utcz.com/z/332505.html

回到顶部