AJAX-项目优化(目录、基地址、token、请求拦截器)

目录管理

基地址存储

 在utils/request.js配置axios请求基地址

作用:提取公共前缀地址,配置后axios请求时都会baseURL+url

填写API的公共前缀后,将js文件导入到html文件中

<script src="../../utils/request.js"></script>

再使用axios请求接口的时候,只写API地址后半段

token

概念:访问权限的令牌,本质上是一串字符串

创建:正确登录后,由后端签发并返回

作用:判断是否有登录状态等,控制访问权限

注意:前端只能判断token有无,而后端才能判断token的有效性

如果很多接口都需要用header传递token,那么可以在请求拦截器里统一设置公共headers选项

官网:拦截器 | Axios中文文档 | Axios中文网

axios请求拦截器

发起请求之前,触发的配置函数,对请求参数进行额外配置

在utils/request.js中配置拦截器

// 添加请求拦截器
axios.interceptors.request.use(function (config) {// 在发送请求之前做些什么//统一携带token令牌字符串在请求头上const token = localStorage.getItem('token')token && (config.headers.Authorization = token)return config;}, function (error) {// 对请求错误做些什么return Promise.reject(error);});

axios响应拦截器

响应回到then/catch之前,触发的拦截函数,对响应结果统一处理

// 添加响应拦截器
axios.interceptors.response.use(function (response) {// 2xx 范围内的状态码都会触发该函数。// 对响应数据做点什么return response;}, function (error) {// 超出 2xx 范围的状态码都会触发该函数。// 对响应错误做点什么,例如:统一对401身份验证失败情况做出处理if(error?.response?.status === 401){alert('身份验证失败,请重新登录')}return Promise.reject(error);});

优化响应结果:可以观察返回信息的层级,把return response改为return response.data(或其他),这样获取到的返回信息都由response下的信息变为了response.data下的信息

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

如若内容造成侵权/违法违规/事实不符,请联系瞎胡闹网进行投诉反馈,一经查实,立即删除!

相关文章

【IntelliJ IDEA】运行测试报错解决方案(附图)

IntelliJ IDEA 版本 2023.3.4 (Ultimate Edition) 测试报错信息 命令行过长。 通过 JAR 清单或通过类路径文件缩短命令行&#xff0c;然后重新运行 解决方案 修改运行配置&#xff0c;里面如果没有缩短命令行&#xff0c;需要再修改选项里面勾选缩短命令行让其显示&#x…

【HTTP完全注解】一些神奇的URL

URL HTTP 请求的内容被称为"资源"&#xff0c;‘资源’这一概念非常宽泛&#xff0c;它可以是一份文档&#xff0c;一张图片&#xff0c;或所有其他你能够想到的格式。每个资源的名称和位置由一个 URL&#xff08;统一资源定位符&#xff0c;它是 URI 的一种&#x…

GT收发器第一篇_总体结构介绍

文章目录 前言GT收发器介绍 前言 之前写过一篇简单介绍GT的文章https://blog.csdn.net/m0_56222647/article/details/136730026&#xff0c;可以先通过这篇文章对整体进行简单了解一下。 GT收发器介绍 参考xilinx手册ug476 对于7系列的FPGA&#xff0c;共有3个系列&#xf…

SQL Server 数据库常见提权总结

前面总结了linux和Windows的提权方式以及Mysql提权&#xff0c;这篇文章讲讲SQL Server数据库的提权。 目录 基础知识 权限判定 系统数据库 存储过程 常见系统存储过程 常见扩展存储过程 xp_cmdshell扩展存储过程提权 xp_dirtree写入文件提权 sp_oacreate提权 xp_re…

那些激励你深入研究技术的语录

遇到耗时高的问题&#xff0c;90%能用重启解决&#xff0c;但是不找到原因&#xff0c;问题一定会再次出现。 代码里的Bug就像房间里的老鼠&#xff0c;你不找到它&#xff0c;它就会一直捣乱。 代码的质量决定了程序的稳定性&#xff0c;而程序的稳定性则决定了业务的成败。 不…

面试题:Redis

一、为什么要用Redis&#xff1f; 1、内存数据库&#xff0c;快&#xff0c;很快....... 2、工作单线程worker&#xff0c;串行化、原子操作. &#xff08;IO线程是多线程&#xff09;- 避免上下文切换 3、IO模型&#xff08;epoll&#xff09;, 支撑高并发. 4、kv模型&…

风电机组的CMS(Condition Monitoring System,状态监测系统)收集的振动信号中包含的噪声主要来源

风电机组的CMS&#xff08;Condition Monitoring System&#xff0c;状态监测系统&#xff09;收集的振动信号中包含的噪声主要来源于风电机组在运行过程中的各种机械部件和环境因素。具体来说&#xff0c;这些噪声主要包括&#xff1a; 机械噪声及结构噪声&#xff1a; 齿轮箱…

华为防火墙配置指引超详细(包含安全配置部分)以USG6320为例

华为防火墙USG6320 华为防火墙USG6320是一款高性能、高可靠的下一代防火墙,适用于中小型企业、分支机构等场景。该防火墙支持多种安全功能,可以有效抵御网络攻击,保护网络安全。 目录 华为防火墙USG6320 1. 初始配置 2. 安全策略配置 3. 防火墙功能配置 4. 高可用性配…

Linux shell编程学习笔记42:md5sum

0 前言 前几天在国产电脑上遇到一个问题&#xff0c;先后接到两个文件&#xff0c;如何判断这两个文件内容是否相同&#xff1f; 如果是在Windows系统&#xff0c;可以用fc命令&#xff0c;或者用我自己写的FileInfo&#xff0c;提取两个文件有MD5、SHA1、CRC32值进行比较来判…

搭建文件服务器,按组别授权,并且可查看操作日志。

搭建一个文件服务器并实现按组别授权以及操作日志查看&#xff0c;可以使用开源的解决方案如Samba&#xff08;在Linux环境下&#xff09;或Windows Server中的DFS&#xff08;分布式文件系统&#xff09;结合Active Directory进行权限管理。以下是一个基于Samba和Linux环境的基…

(五)Nacos配置管理

1.Nacos配置管理 Nacos除了可以做注册中心&#xff0c;同样可以做配置管理来使用。 1.1.统一配置管理 当微服务部署的实例越来越多&#xff0c;达到数十、数百时&#xff0c;逐个修改微服务配置就会让人抓狂&#xff0c;而且很容易出错。我们需要一种统一配置管理方案&#…

Windows系统搭建Oracle结合内网穿透实现公网访问本地数据库

文章目录 前言1. 数据库搭建2. 内网穿透2.1 安装cpolar内网穿透2.2 创建隧道映射 3. 公网远程访问4. 配置固定TCP端口地址4.1 保留一个固定的公网TCP端口地址4.2 配置固定公网TCP端口地址4.3 测试使用固定TCP端口地址远程Oracle 前言 Oracle&#xff0c;是甲骨文公司的一款关系…

吴恩达机器学习:实践实验室-应用机器学习的建议(Advice for Applying )

在这个实验室中&#xff0c;您将探索评估和改进机器学习模型的技术。 文章目录 1 - Packages2-评估学习算法&#xff08;多项式回归&#xff09;2.1拆分数据集2.1.1图列、测试集 2.2模型评估的误差计算&#xff0c;线性回归2.3比较训练和测试数据的表现 3-偏差和方差3.1绘图列…

python各类数据容器总结

各种数据容器的对比 是否支持下标索引 支持&#xff1a;列表、元组、字符串-序列类型 不支持&#xff1a;集合、字典 是否支持重复元素 支持&#xff1a;列表、元组、字符串-序列类型 不支持&#xff1a;集合、字典-非序列类型 是否可以修改 支持&#xff1a;列表、集合、字…

【YOLOV5 入门】——环境配置(Miniconda/Pytorch/YOLOv5/PYPI镜像源)

声明&#xff1a;笔记是毕设时根据B站博主视频学习时自己编写&#xff0c;请勿随意转载&#xff01; 计划&#xff1a; 入门篇&#xff1a;环境安装、模型检测、构建自定义数据集、训练数据集、可视化界面搭建、Web系统搭建。拓展篇&#xff1a;使用服务器训练、使用pycharm和…

|行业洞察·趋势报告|《2024年时尚潮流趋势洞察-31页》

报告内容的详细解读&#xff1a; |趋势洞察库| 关注我 主页个人介绍 查看完整报告 1. 新中式潮流 定义与特点&#xff1a;新中式风格是将传统文化元素与现代审美相结合的一种风格&#xff0c;它在服装、美妆、美食和家居等多个领域都有广泛的应用。热度分析&#xff1a;新中…

学习JavaEE的日子 Day32 线程池 上

Day32 线程池 1.引入 一个线程完成一项任务所需时间为&#xff1a; 创建线程时间 - Time1线程中执行任务的时间 - Time2销毁线程时间 - Time3 2.为什么需要线程池(重要) 线程池技术正是关注如何缩短或调整Time1和Time3的时间&#xff0c;从而提高程序的性能。项目中可以把Time…

Grafana实时监控minio的极简方法

背景 想监控一下minio的部分信息. 使用过程中需要关注的内容挺多的. 只看简单的node感觉已经不够了. 所以想监控易一下. ERLANG 复制 全屏 方式和方法 minio其实集成了prometheus 支持的监控指标 只需要在配置文件中放开就可以了. 虽然可以使用mc 的命令 create beartoken 但…

002-基于Pytorch的手写汉字数字分类

本节将介绍一种 2.1 准备 2.1.1 数据集 &#xff08;1&#xff09;MNIST 只要学习过深度学习相关理论的人&#xff0c;都一定听说过名字叫做LeNet-5模型&#xff0c;它是深度学习三巨头只有Yann Lecun在1998年提出的一个CNN模型&#xff08;很多人认为这是第一个具有实际应用…

ARMv9新特性:虚拟内存系统架构 (VMSA) 的增强功能

快速链接: 【精选】ARMv8/ARMv9架构入门到精通-[目录] &#x1f448;&#x1f448;&#x1f448; 权限索引 2022 ARM引入了一种新的控制内存权限方法。 不再是直接在转换表条目 (TTE) 中编码权限&#xff0c;而是使用 TTE 中的字段来索引寄存器中指定的权限数组。这种间接提供…