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<AxiosResponse<T>>}*/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<never>}*/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<never>}*/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);
},

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/65281.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

vulnhub Seattle-0.0.3

环境&#xff1a;vuluhub Seattle-0.0.3 1.catelogue处任意文件下载(目录穿越) http://192.168.85.139/download.php?item../../../../../../etc/passwd 有个admin目录&#xff0c;可以下载里面的文件进行读取 2.cltohes详情页面处(参数prod)存在sql报错注入 http://192.16…

【C++刷题】动态规划

文章目录 前言一、斐波那契系列1.第 N 个泰波那契数2.三步问题3.使用最小花费爬楼梯4.解码方法5.不同路径6.下降路径最小和7.地下城游戏 二、多种状态系列1.按摩师2.打家劫舍II3.删除并获得点数4.粉刷房子5.买卖股票的最佳时机6.买卖股票的最佳时机III 三、子数组和子串系列1.最…

SQL中的CASE WHEN语句:从基础到高级应用指南

SQL中的CASE WHEN语句&#xff1a;从基础到高级应用指南 准备工作 - 表1: products 示例数据&#xff1a; 我们使用一个名为"Products"的表&#xff0c;包含以下列&#xff1a;ProductID、ProductName、CategoryID、UnitPrice、StockQuantity。 -- 建表 CREATE TA…

【iOS】Masonry的基本使用

文章目录 前言一、使用Masonry的原因二、约束的常识三、Masonry的简单使用四、Masonry的用例总结 前言 暑假安装了cocoapods&#xff0c;简单使用其调用了SVGKit&#xff0c;但是没有学习Masonry&#xff0c;特此总结博客记录Masonry的学习 一、使用Masonry的原因 Masonry是一…

最新ChatGPT程序源码+AI系统+详细图文部署教程/支持GPT4.0/支持Midjourney绘画/Prompt知识库

一、AI系统 如何搭建部署人工智能源码、AI创作系统、ChatGPT系统呢&#xff1f;小编这里写一个详细图文教程吧&#xff01;SparkAi使用Nestjs和Vue3框架技术&#xff0c;持续集成AI能力到AIGC系统&#xff01; 1.1 程序核心功能 程序已支持ChatGPT3.5/GPT-4提问、AI绘画、Mi…

自动化安装Nginx脚本:简化您的服务器配置

在如今的网络世界中&#xff0c;Nginx作为一款高性能的Web服务器和反向代理服务器&#xff0c;扮演着至关重要的角色。然而&#xff0c;手动安装和配置Nginx可能会耗费大量时间和精力&#xff0c;特别是对于那些对Linux系统不太熟悉的人来说。幸运的是&#xff0c;我们为您带来…

详解 SpringMVC 的 @RequestMapping 注解

文章目录 1、RequestMapping注解的功能2、RequestMapping注解的位置3、RequestMapping注解的value属性4、RequestMapping注解的method属性5、RequestMapping注解的params属性&#xff08;了解&#xff09;6、RequestMapping注解的headers属性&#xff08;了解&#xff09;7、Sp…

6. vue-element-admin 二次开发避坑指南

vue-element-admin 二次开发避坑指南 1.1 前言1.1.1 切换标签时未保存页面的操作内容1.1.2 markdown 样式乱码1.1.3 修改默认尺寸1.1.4 当后端服务器宕机情况下页面加载层一直转圈无法停止&#xff0c;只能关闭页面1.1.5 隐藏齿轮 1.1 前言 上一篇博文&#xff0c;我们分享了vu…

从零构建深度学习推理框架-11 Resnet

op和layer结构 在runtime_ir.cpp中&#xff0c;我们上一节只构建了input和output&#xff0c;对于中间layer的具体实现一直没有完成&#xff1a; for (const auto& kOperator : this->operators_) {if (kOperator->type "pnnx.Input") {this->input_o…

ssm+vue“魅力”繁峙宣传网站源码和论文

ssmvue“魅力”繁峙宣传网站源码和论文102 开发工具&#xff1a;idea 数据库mysql5.7 数据库链接工具&#xff1a;navcat,小海豚等 技术&#xff1a;ssm 摘 要 随着科学技术的飞速发展&#xff0c;各行各业都在努力与现代先进技术接轨&#xff0c;通过科技手段提高自身…

C语言:截断+整型提升+算数转换练习

详情关于整型提升、算数转换与截断见文章&#xff1a; 《C语言&#xff1a;整型提升》 《C语言&#xff1a;算数转换》 一、代码一 int main() { char a -1; signed char b -1; unsigned char c -1; printf("%d %d %d", a, b, c); return 0; } 求…

使用安全复制命令scp在Windows系统和Linux系统之间相互传输文件

现在已经有很多远程控制服务器的第三方软件平台&#xff0c;比如FinalShell&#xff0c;MobaXterm等&#xff0c;半可视化界面&#xff0c;使用起来非常方便和友好&#xff0c;两个系统之间传输文件直接拖就行&#xff0c;当然也可以使用命令方式在两个系统之间相互传递。 目录…

C++面试题(丝)-计算机网络部分(1)

目录 1计算机网络 53 简述epoll和select的区别&#xff0c;epoll为什么高效&#xff1f; 54 说说多路IO复用技术有哪些&#xff0c;区别是什么&#xff1f; 55 简述socket中select&#xff0c;epoll的使用场景和区别&#xff0c;epoll水平触发与边缘触发的区别&#xff1f;…

利用Cython发布python项目

最近有个python项目要发布&#xff0c;遇到了两个问题&#xff0c;一是项目在windows下运行有点慢&#xff0c;二是python都是脚本直接运行&#xff0c;没法保护代码安全。查了一下&#xff0c;有人说可以利用Cython&#xff0c;把python代码编译成为C来调用。即能提高运行性能…

使用 ElasticSearch 作为知识库,存储向量及相似性搜索

一、ElasticSearch 向量存储及相似性搜索 在当今大数据时代&#xff0c;快速有效地搜索和分析海量数据成为了许多企业和组织的重要需求。Elasticsearch 作为一款功能强大的分布式搜索和分析引擎&#xff0c;为我们提供了一种优秀的解决方案。除了传统的文本搜索&#xff0c;El…

linux上vim编辑器设置

linux上vim编辑器设置 减少tab缩进、显示行号等 在vimrc&#xff08;一般在/etc/vim/vimrc中&#xff09;末尾添加 set helplangcn "中文帮助文档(前提是下了中文包) syntax enable syntax on " 自动语法高亮 set number"显示行号 colorscheme desert" 设…

【两周学会FPGA】从0到1学习紫光同创FPGA开发|盘古PGL22G开发板学习之数码管动态显示(五)

本原创教程由深圳市小眼睛科技有限公司创作&#xff0c;版权归本公司所有&#xff0c;如需转载&#xff0c;需授权并注明出处 适用于板卡型号&#xff1a; 紫光同创PGL22G开发平台&#xff08;盘古22K&#xff09; 一&#xff1a;盘古22K开发板&#xff08;紫光同创PGL22G开发…

Java-API简析_java.util.HashTable<K, V>类(基于 Latest JDK)(浅析源码)

【版权声明】未经博主同意&#xff0c;谢绝转载&#xff01;&#xff08;请尊重原创&#xff0c;博主保留追究权&#xff09; https://blog.csdn.net/m0_69908381/article/details/132522445 出自【进步*于辰的博客】 因为我发现目前&#xff0c;我对Java-API的学习意识比较薄弱…

http和https的区别?

什么是 HTTP&#xff1f; HTTP是一种互联网数据传输协议&#xff0c;用于在网络服务器和客户端之间进行数据传输。作为万维网的基础&#xff0c;HTTP协议允许网络浏览器向网络服务器发送请求&#xff0c;服务器则会返回响应。HTTP协议基于文本&#xff0c;因此传输的数据是人类…

41.岛屿数量(第四期模拟笔试)(BFS练习题)

题目&#xff1a; 给定一个 m 行 n 列的二维地图&#xff0c;初始化每个单元格都是海洋&#xff0c;二维地图外也全是海洋。 操作 addLand 会将单元格&#xff08;col, row&#xff09;变为陆地。 定义一系列相连的被海洋包围的陆地为岛屿&#xff0c; 横向相邻或者纵向相连的…