vue+axios——创建多个实例共用请求拦截器和响应拦截器（403错误信息不提示bug解决）——基础积累
创建多个实例共用请求拦截器和响应拦截器：使用的是函数的继承，也就是call()方法，这个方法第一个参数就是this,后面的参数可以是一个也可以是多个。最后一定要记得要return出去，否则接口是拿不到数据的。
import axios from 'axios';
import Cookie from 'js-cookie';
const BASE_URL = process.env.VUE_APP_API_BASE_URL;
const BASE_URL_QUOTE = process.env.VUE_APP_API_BASE_URL_QUOTE;
// 跨域认证信息 header 名
const xsrfHeaderName = 'Authorization';
axios.defaults.timeout = 20000;
axios.defaults.withCredentials = false;
axios.defaults.xsrfHeaderName = xsrfHeaderName;
axios.defaults.xsrfCookieName = xsrfHeaderName;
axios.defaults.headers = {'accept-language':'zh-Hans'};
const request= axios.create({
baseURL: BASE_URL,
});
const requestQuoteCenter= axios.create({
baseURL: BASE_URL_QUOTE,
});
// http method
const METHOD = {
GET: 'get',
POST: 'post',
PUT: 'put',
DELETE: 'delete',
};
/**
* axios请求
* @param url 请求地址
* @param method {METHOD} http method
* @param params 请求参数
* @returns {Promise>}
*/
async function requestQuoteCenter(url, method, params, config) {
switch (method) {
case METHOD.GET:
return axios.get(url, { params, ...config });
case METHOD.POST:
return axios.post(url, params, config);
case METHOD.PUT:
return axios.put(url, params, config);
case METHOD.DELETE:
return axios.delete(url, { params, ...config });
default:
return axios.get(url, { params, ...config });
}
}
async function request(url, method, params, config) {
return await requestQuoteCenter.call(this, url, method, params, config);
}
/**
* 加载 axios 拦截器
* @param interceptors
* @param options
*/
function loadInterceptors(interceptors, options) {
const { request, response } = interceptors;
// 加载请求拦截器
request.forEach((item) => {
let { onFulfilled, onRejected } = item;
if (!onFulfilled || typeof onFulfilled !== 'function') {
onFulfilled = (config) => config;
}
if (!onRejected || typeof onRejected !== 'function') {
onRejected = (error) => Promise.reject(error);
}
axios.interceptors.request.use(
(config) => onFulfilled(config, options),
(error) => onRejected(error, options)
);
});
// 加载响应拦截器
response.forEach((item) => {
let { onFulfilled, onRejected } = item;
if (!onFulfilled || typeof onFulfilled !== 'function') {
onFulfilled = (response) => response;
}
if (!onRejected || typeof onRejected !== 'function') {
onRejected = (error) => Promise.reject(error);
}
axios.interceptors.response.use(
(response) => onFulfilled(response, options),
(error) => onRejected(error, options)
);
});
}
export {
METHOD,
request,
loadInterceptors,
requestQuoteCenter,
};
详细的请求和响应拦截器内容——分请求token认证校验+响应401和403校验
import Cookie from 'js-cookie';
const xsrfHeaderName = import.meta.env.VITE_TOKEN_NAME;
import { removeAuthorization } from '@/utils/request';
// 401拦截
const resp401 = {
/**
* 响应数据之前做点什么
* @param response 响应对象
* @param options 应用配置 包含: {router, i18n, store, message}
* @returns {*}
*/
onFulfilled(response, options) {
const { message } = options;
if (response.code === 401) {
message.error('无此权限');
}
return response;
},
/**
* 响应出错时执行
* @param error 错误对象
* @param options 应用配置 包含: {router, i18n, store, message}
* @returns {Promise}
*/
onRejected(error, options) {
const { router, message } = options;
if (error.response && error.response.status == 401) {
message.error('认证 token 已过期，请重新登录');
Cookie.remove(xsrfHeaderName);
removeAuthorization();
router.push('/login');
return Promise.reject(error);
}
let msg = '';
if (error.response && error.response.data && error.response.data.error_description) {
msg = error.response.data.error_description;
} else if (error.response && error.response.data && error.response.data.error) {
msg = error.response.data.error.message;
} else {
msg = error.message;
}
message.error(msg);
return Promise.reject(error);
},
};
const resp403 = {
onFulfilled(response, options) {
const { message } = options;
if (response.code === 403) {
message.error('请求被拒绝');
}
return response.data;
},
// onRejected(error, options) {
// const {message} = options
// const {response} = error
// if (response.status === 403) {
// message.error('请求被拒绝')
// }
// return Promise.reject(error)
// }
};
const reqCommon = {
/**
* 发送请求之前做些什么
* @param config axios config
* @param options 应用配置 包含: {router, i18n, store, message}
* @returns {*}
*/
onFulfilled(config, options) {
const { router, message } = options;
const { url, xsrfCookieName, headers } = config;
// if (url.indexOf('login') === -1 && xsrfCookieName && !Cookie.get(xsrfCookieName)) {
// message.warning('认证 token 已过期，请重新登录')
// }
if (headers.Authorization && xsrfCookieName && !Cookie.get(xsrfCookieName)) {
message.warning('认证 token 已过期，请重新登录');
}
if (!headers.__tenant) {
config.headers['Authorization'] = Cookie.get(xsrfHeaderName);
} else {
delete config.headers.Authorization;
}
return config;
},
/**
* 请求出错时做点什么
* @param error 错误对象
* @param options 应用配置 包含: {router, i18n, store, message}
* @returns {Promise}
*/
onRejected(error, options) {
const { message } = options;
let msg = '';
if (error.response && error.response.data) {
msg = error.response.data.error;
} else {
msg = error.message;
}
message.error(msg);
return Promise.reject(error);
},
};
export default {
request: [reqCommon], // 请求拦截
response: [resp401, resp403], // 响应拦截
};
上面两个文件合并后的处理如下：
在main.js中添加如下内容：
import { loadInterceptors } from '@/utils/request';
import interceptors from '@/utils/axios-interceptors';
loadInterceptors(interceptors, {router, store, i18n, message})
403报错时，错误信息不提示的问题——解决办法
今天发现一个问题，如果是接口报403错误时，通过接口调用的时候，是无法获取到错误信息的。
之前的调用接口的方法就是：
import {request,METHOD} from './request.js';//就是从上面第一个文件导出的参数中获取到request
export function del(id) {
return request(`/api/app/article/${id}`, METHOD.DELETE)
}
1.403不报错的解决办法（1）——通过async await的方式来处理接口
import {request,METHOD} from './request.js';//就是从上面第一个文件导出的参数中获取到request
export async function del(id) {
return await request(`/api/app/article/${id}`, METHOD.DELETE)
}
2.403不报错的解决办法（2）——接口请求后的方法async await的处理方法
import {request} from './request.js';//就是从上面第一个文件导出的参数中获取到request
async customRequest(file) {
let formData = new FormData();
formData.append('file', file.file);
let resp = await request(this.baseUrl, 'post', formData);
//此时，如果接口调用失败，则会抛出错误提示信息，否则会执行下面的代码了
this.$emit('uploadSucc', resp.Data);
},