当前位置：首页 > news >正文

vue3 ts 封装axios,配置axios前置拦截器，让所有axios请求携带token

news 来源：原创 2025/7/21 9:56:36

vue3 ts 封装axios,配置axios前置拦截器，让所有axios请求携带token

http.ts
app.ts
vue文件

http.ts

import axios from 'axios' // 引入axios
import router from '@/router'
import Qs from 'qs'
import { ElMessage } from 'element-plus'const { prefixBasePath } = require('../../../config/basePath')
axios.defaults.baseURL = prefixBasePath;// 配置axios前置拦截器，作用是让所有axios请求携带token，后台需要token校验是否登录
axios.interceptors.request.use(config => {// 1.从缓存中获取到token,这里的Authorization时登录时你给用户设置token的键值let authorization = localStorage.getItem("Authorization");// 2.如果token不为null，那么设置到请求头中，此处哪怕为null，我们也不进行处理，因为后台会进行拦截if (authorization) {//后台给登录用户设置的token的键时什么，headers['''']里的键也应该保持一致config.headers['Authorization'] = authorization;}// 3.放行return config;
}, error => {
//失败后抛出错误Promise.reject(error);
})//  *   --------------------  get请求  --------------------
// get请求
// 1、根据id查看一条信息
// 2、获取所有数据，展示表格数据
export function getOneOrAllData(url: any, params: any, hideTips: any) {return new Promise((resolve, reject) => {showLoading()axios.get(url, {params: params,// 解决get传数组问题，主要是以下五行代码paramsSerializer: {serialize: function (params) {return Qs.stringify(params, { arrayFormat: 'repeat' })}},}).then(res => {hideLoading()switch (res.data.code) {case 401:jumpToLogin()breakcase 500:ElMessage.error(res.data.message)breakcase 200:// if (!hideTips)//   ElMessage.success(res.data.message)resolve(res.data)breakdefault:Toast(res.data.message)resolve(res.data)break}}).catch(err => {errMsg(err)reject(err)})})
}//  *   --------------------  post请求  --------------------
// （非）formData格式
// 添加、修改
// flag为true，不弹提示窗
export function addOrReviseData(url: any, params: any, showTips: any, hideLoads: any) {return new Promise((resolve, reject) => {// {//   headers: {//     'Content-Type': 'multipart/form-data'//   }// }if (!hideLoads)showLoading()axios.post(url, params).then(res => {hideLoading()switch (res.data.code) {case 401:jumpToLogin()breakcase 500:ElMessage.error(res.data.message)resolve(res.data)breakcase 200:if (showTips)ElMessage.success(res.data.message)resolve(res.data)breakdefault:resolve(res.data)break}}).catch(err => {errMsg(err)reject(err)})})
}//  *   --------------------  登录、退出  --------------------
// 登录 - post
export function logIn(url: any, params: any) {return new Promise((resolve, reject) => {showLoading()axios.post(url, params).then(res => {switch (res.data.code) {case 500:ElMessage.error(res.data.message)breakcase 200:ElMessage.success(res.data.message)resolve(res.data)break}}).catch(err => {errMsg(err)reject(err)})})
}// 退出 - get
export function logOut(url: any, params: any) {return new Promise((resolve, reject) => {axios.get(url, { params: params }).then(res => {ElMessage.success(res.data.message)jumpToLogin(true)}).catch(err => {jumpToLogin(true)})})
}// 跳转到登录页
function jumpToLogin(showTips) {router.push({ path: '/login' })
}

app.ts

import { getOneOrAllData, addOrReviseData, logIn, logOut} from './http'// import router from '@/router'
// if (router.app._route.path.includes('/onLineRegister/')) {
//   return '/globalApi/app'
// }
function GlobalUrl() {return '/globalApi'
}export const login = (p: any) => logIn(GlobalUrl() + '/login', p, false)//登录
export const logout = (p: any) => logOut(GlobalUrl() + '/logout', p, false)//退出
export const addOrUpdate = (p: any) => addOrReviseData(GlobalUrl() + '/addOrUpdate', p, true)//增加/修改信息
export const getList = (p: any) => getOneOrAllData(GlobalUrl() + '/getList', p, false)//查询数据

vue文件

import { login } from "@/app"
login(){login(form).then((res: any) => {console.log(res)}
}

vue3 ts 封装axios,配置axios前置拦截器，让所有axios请求携带token

vue3 ts 封装axios,配置axios前置拦截器，让所有axios请求携带token http.tsapp.tsvue文件 http.ts import axios from axios // 引入axios import router from /router import Qs from qs import { ElMessage } from element-plusconst { prefixBasePath } requir…...

编程日记 2025/7/21 9:56:36

前端使用WPS WebOffice 做在线文档预览与编辑

先附上官网 WebOffice SDK 1、在下面这个地方找到jdk，然后下载按照 2、只需要把jdk下载下来，放到项目中，然后引入到项目中就可以了，在wps 官网创建个应用，然后把appId放到代码中就可以了，等待后端把回调…...

编程日记 2025/7/17 0:00:42

在 CentOS 系统中开机自动执行 Shell 脚本

在 CentOS 系统中，可以通过以下方法设置开机自动执行 Shell 脚本。推荐使用 systemd 服务（现代 Linux 系统的标准方式），也可以使用传统的 /etc/rc.local 方法。方法 1：使用 Systemd 服务（推荐）…...

编程日记 2025/7/17 13:58:51

kotlin知识体系(四) : inline、noinline、crossinline 关键字对应编译后的代码是怎样的 ?

1. inline、noinline、crossinline 的作用在 Kotlin 里，inline、noinline 和 crossinline 这几个关键字和高阶函数紧密相关，它们能够对高阶函数的行为进行优化和控制。本文接下来会详细介绍它们的作用和原理。 1.1 inline 关键字 inline 关键字用于修…...

编程日记 2025/7/18 23:05:50

Python电影市场特征：AR模型时间序列趋势预测、热图可视化评分影响分析IMDb数据|附数据代码

原文链接：https://tecdat.cn/?p41214 分析师：Zhiheng Lin 在数字时代，电影产业的数据分析已成为洞察市场趋势与用户偏好的重要工具。本专题合集聚焦印度电影市场，通过IMDb数据集（IMDb Movies Dataset）的深…...

编程日记 2025/7/15 22:33:58

【后端】【Django DRF】从零实现RBAC 权限管理系统

Django DRF 实现 RBAC 权限管理系统在 Web 应用中，权限管理是一个核心功能，尤其是在多用户系统中，需要精细化控制不同用户的访问权限。本文介绍如何使用 Django DRF 设计并实现 RBAC（基于角色的访问控制）系统&…...

编程日记 2025/7/16 20:14:27

使用docker部署springboot、Vue分离项目，部署到主路径

这几天写了一个小的应用，牵涉到了使用docker部署问题，中间遇到了一些小问题，此处记录下，为以后遇到类似的问题提供一些解决思路。 1、准备使用的镜像：mysql、redis、nginx、jdk。镜像地址： docker pull s…...

编程日记 2025/7/17 15:53:58

大疆上云api直播功能如何实现

概述流媒体服务器作为直播画面的中转站，它接收推流端的相机画面，同时拉流端找它获取相机的画面。整个流程如下：在流媒体服务器上创建流媒体应用（app），一个流媒体服务器上面可以创建多个流媒体应用约定推拉流的地址。假设流媒体服务器工作在1935端口上面，假设创建的流…...

编程日记 2025/7/15 15:40:25

服务器数据恢复—Raid5热备盘同步中断的数据恢复案例

服务器数据恢复环境： 某公司一台存储上有一组由15块硬盘组建的raid5阵列。raid5阵列上层是一个xfs裸分区，起始位置是0扇区。服务器故障： raid5阵列中有一块硬盘出现故障掉线，热备盘自动上线同步数据，数据同步还没有完…...

编程日记 2025/7/15 19:14:56

FFmpeg开发学习：AVFormatContext结构体

1.AvFormatContext结构体是ffmpeg中用于处理多媒体文件的核心结构体之一，属于libavformat模块，主要负责描述一个多媒体文件或流的封装格式，用来打开，读取，写入，操作媒体文件（如.MP4 .mkv .flv…...

编程日记 2025/7/20 14:17:29

Ceph集群2025（Squid版）导出高可用NFS集群(上集)

#创建一个CephFS 文件系统 ceph fs volume create cephfs02#创建子卷 ceph fs subvolumegroup create cephfs02 myfsg2#查看子卷 ceph fs subvolumegroup ls cephfs02[{"name": "myfsg2"} ]创建 NFS Ganesha 集群 #例子 $ ceph nfs cluster create <c…...

编程日记 2025/7/16 21:34:38

Python----计算机视觉处理（Opencv：图像边缘检测：非极大值抑制，双阈值筛选)

一、高斯滤波边缘检测本身属于锐化操作，对噪点比较敏感，所以需要进行平滑处理。这里使用的是一个5*5的高斯核对图像进行消除噪声。二、计算图像的梯度和方向三、非极大值抑制在得到每个边缘的方向之后，其实把它们连起来边缘检测就算完了…...

编程日记 2025/7/10 4:56:05

超微服务器主板重置ipmi登录密码

超微服务器主板重置ipmi登录密码超微服务器的ipmi登录密码不对，需要重置但是bios内并没有找到可以设置的选项。以下是解决办法： 安装IPMITOOL apt install ipmitool -y执行以下命令加载模块： modprobe ipmi_watchdog modprobe ipmi_po…...

编程日记 2025/7/18 11:21:04

【react18】react项目使用mock模拟后台接口

前后端分离项目，后端还没有接口的时候，前端可以使用mockjs的技术实行假数据的模拟。这里使用的是mock的库msw实现这个业务. MSW msw是mock的工具，官网地址是在这里使用步骤 1.安装msw npm install mswlatest --save-dev2.新建存放mock接…...

编程日记 2025/7/20 10:01:53

阿里云国际站代理商：如何通过Serverless调用GPU资源？

1.采用支持GPU资源的Serverless系统选择支持GPU资源的Serverless系统，如Dilu系统，它通过内省弹性（introspectiveelasticity）机制，提供细粒度和自适应的二维协同扩展机制，支持GPU资源按需分配。 2.系统…...

编程日记 2025/7/17 12:58:27

CI/CD(三) 安装nfs并指定k8s默认storageClass

一、NFS 服务端安装（主节点 10.60.0.20） 1. 安装 NFS 服务端 sudo apt update sudo apt install -y nfs-kernel-server 2. 创建共享目录并配置权限 sudo mkdir -p /data/k8s sudo chown nobody:nogroup /data/k8s # 允许匿名访问 sudo chmod 777 /dat…...

编程日记 2025/7/18 7:38:56

Ae 效果详解：音频波形

Ae菜单：效果/生成/音频波形 Generate/Audio Waveform 音频波形 Audio Waveform效果可以可视化音频信号，能以多种方式显示音频波形，包括沿开放或闭合的蒙版路径显示。本效果适用于所有色深模式（8-bpc、16-bpc、32-bpc）…...

编程日记 2025/7/19 1:10:09

S7-1200对V90 PN进行位置控制的三种方法

S7-1200系列PLC通过PROFINET与V90 PN伺服驱动器搭配进行位置控制，实现的方法主要有以下三种： ? 方法一、在PLC中组态位置轴工艺对象，V90使用标准报文3，通过MC_Power、MC_MoveAbsolute等PLC Open标准程序块进行控制, 这种控制方式属于中央控制方式（位置控制在PLC中计算，驱…...

编程日记 2025/7/16 5:25:27

定制表单排序，react, sort

概要在实际开发中，我们常常碰到，一个页面根据条件不同，其展示的表单项需要动态改变位置；但是又不想写重复代码；可以试一下以下方法； 效果使用的技术 HtmlReact,useMemoES6的扩展运算代码 import Re…...

编程日记 2025/7/14 1:25:12

Vue3中keep-alive缓存组件应用场景。

文章目录一、KeepAlive是什么？二、基本使用1.例子2.keep-alive使用三、其他属性3.1 包含/排除3.2 最大缓存实例数3.3 缓存实例的生命周期总结一、KeepAlive是什么？ 是一个内置组件，它的功能是在多个组件间动态切换时缓存被移除的组件实例…...

编程日记 2025/7/16 23:09:20

测试用例`

1.什么是测试用例测试⽤例（Test Case）是为了实施测试⽽向被测试的系统提供的⼀组集合，这组集合包含：测试环境、操作步骤、测试数据、预期结果等要素. 2.测试用例的万能公式(重点) 设计测试⽤例的万能公式： 功能测试界…...

编程日记 2025/7/19 15:10:26

React 中的错误边界（Error Boundaries），如何使用它们捕获组件错误

大白话React 中的错误边界（Error Boundaries），如何使用它们捕获组件错误在 React 里，错误边界就像是一个“小卫士”，专门负责在组件出现错误时挺身而出，避免整个应用因为一个小错误就崩溃掉。接下来我会详…...

编程日记 2025/7/21 8:34:58

往期项目shader着色器实践效果应用合集

1、管路混色 2、水管水流效果 3、水管流入到流完效果 4、加热冷却两色混色示意 XX、毒蘑菇测试效果...

编程日记 2025/6/28 4:52:58

go-zero: sqlx 对timestamp 格式数据问题

1.问题背景对于goctl自动生成的model代码文件，对于非null的时间数据列，一定会产生如下问题 deleted_at\": unsupported Scan, storing driver.Value type \u003cnil\u003e into type *time.Time" 例如以上的问题，不论是插入还…...

编程日记 2025/7/15 14:14:41

systemd-networkd 的 *.network 配置文件详解笔记250323

systemd-networkd 的 *.network 配置文件详解笔记250323 查看官方文档可以用 man systemd.network命令, 或访问: https://www.freedesktop.org/software/systemd/man/latest/systemd.network.html 名称 systemd.network — 网络配置概要 network.network 描述一个纯…...

编程日记 2025/7/19 8:22:49

Axure项目实战：智慧城市APP（四）医疗信息（动态面板、选中交互应用）

亲爱的小伙伴，在您浏览之前，烦请关注一下，在此深表感谢！ 课程主题：智慧城市APP医疗信息模块主要内容：医疗信息模块原型设计与交互应用场景：医疗信息行业案例展示： 案例视频&…...

编程日记 2025/7/17 4:53:34

机器学习正则化技术：Ridge、Lasso与ElasticNet全解析

机器学习中的正则化技术在机器学习中，正则化技术（如 Ridge 和 Lasso）主要用于解决过拟合问题，通过限制模型复杂度提高泛化能力。以下是详细说明及实例代码： 一、正则化解决的问题过拟合：模型在训练集表…...

编程日记 2025/7/14 16:24:43

【汽车传感系统架构：借助传感获取安全】

为了将车辆自动化提升到一个新的水平，设计人员研究了 LiDAR 等传感器选项的权衡，并着眼于传感系统架构。本文引用地址：https://www.eepw.com.cn/article/202503/468584.htm 每年，约有 120 万人死于道路交通事故，还有…...

编程日记 2025/7/20 6:18:58

3.25-2request库

request库一、介绍request库 （1）requests是用python语言编写的简单易用的http库，用来做接口测试的库； （2）接口测试自动化库有哪些？ requests、urllib 、urllib2、urllib3、 httplib 等&…...

编程日记 2025/7/17 14:46:18

LangChain4j（1）：初识LangChain4j

1 什么是LangChain和LangChain4j LangChain是一个大模型的开发框架，使用LangChain框架，程序员可以更好的利用大模型的能力，大大提高编程效率。如果你是一个lava程序员，那么对LangChain最简单直观的理解就是，LangChain…...

编程日记 2025/7/16 23:54:47

UMI-OCR Docker 部署

额外补充 Docker 0.前置条件部署前，请检查主机的CPU是否具有AVX指令集 lscpu | grep avx 输出如下即可继续部署 Flags: ... avx ... avx2 ... 1.下载dockerfile wget https://raw.githubusercontent.com/hiroi-sora/Umi-OCR_runtime_linux/main/Do…...

编程日记 2025/7/19 5:07:22

python每日十题(9)

外存储器的容量一般都比较大，而且大部分可以移动，便于在不同计算机之间进行信息交流。外存储器中数据被读入内存储器后，才能被CPU读取，CPU不能直接访问外存储器。本题答案为A选项。进程是指一个具有一定独立功能的程序关于某个数…...

编程日记 2025/7/16 15:58:37

Jenkins最新版，配置Gitee私人令牌和Gitee凭证

jenkins 配置Gitee私人令牌和凭证 jenkins 版本：Jenkins 2.492.2 Gitee配置 Jenkins配置gitee插件，需要先申请gitee私钥。安装gitee插件申请Gitee私人令牌，后面还需要添加凭证。测试链接，并保存配置凭证...

编程日记 2025/7/18 9:28:11

AI 生成内容（AIGC）：从文本到视频的完整流程

近年来，AI 生成内容（AIGC, AI-Generated Content） 迅速发展，从文本、图片到音频、视频，AI 在创意内容生成方面展现出了惊人的能力。AIGC 不仅提升了内容创作效率，还降低了成本，使得普通用户也能…...

编程日记 2025/7/20 5:19:27

【漏洞复现】Apache Tomcat partial PUT文件上传反序列化漏洞复现（CVE-2025-24813）

❤️博客主页： iknow181 🔥系列专栏： 网络安全、 Python、JavaSE、JavaWeb、CCNP 🎉欢迎大家点赞👍收藏⭐评论✍ 0x00 免责声明本文所述漏洞复现方法仅供安全研究及授权测试使用；任何个人/组织须在合法合规…...

编程日记 2025/7/16 12:38:54

Spring JDBC Template与事务管理：基于XML与注解的实战指南

摘要本文深入解析Spring JDBC Template与事务管理的核心技术，结合XML配置与注解方式两种主流方案，通过转账案例完整演示数据库操作与事务管理的最佳实践。文章涵盖JDBC Template的核心用法、事务配置语法、常见问题及性能优化建议，帮助开发…...

编程日记 2025/7/17 18:58:16

自动化测试selenium(Java版)

1.准备工作 1.1.下载浏览器自动化测试首先我们要准备一个浏览器,我们这里使用谷歌(chrome)浏览器. 1.2.安装驱动管理每一个浏览器都是靠浏览器驱动程序来启动,但是浏览器的版本更新非常快,可能我们今天测试的是一个版本,第二天发布了一个新的版本,那么我们就要重构代码,很…...

编程日记 2025/7/16 21:03:52

【13】Ajax爬取案例实战

目录一、准备工作二、爬取目标三、初步探索：如何判断网页是经js渲染过的？ 四、爬取列表页 4.1 分析Ajax接口逻辑 4.2 观察响应的数据 4.3 代码实现 （1）导入库 （2）定义一个通用的爬取方法…...

编程日记 2025/7/14 1:21:41

tar包部署rabbitMQ

部署erlang： 有网使用： sudo apt-get update sudo apt-get install libncurses5-dev libncursesw5-dev sudo yum install ncurses-devel 无网使用 tar zxvf ncurses.tar.gz mkdir ncurses cd ncurses-6.3/ ./configure --with-shared --without-debu…...

编程日记 2025/7/19 21:35:29

SpringMVC请求与响应深度解析：从核心原理到高级实践

一、SpringMVC架构与核心组件剖析 SpringMVC是基于Java的MVC设计模型实现的轻量级Web框架，其核心架构围绕前端控制器模式构建。以下是核心组件及其作用： DispatcherServlet 作为前端控制器，所有请求首先到达此处。它负责请求分发、协调组件协…...

编程日记 2025/7/21 2:35:26

CentOS 8 安装 Redis 全流程指南：从基础部署到远程安全配置

一、环境准备本文以 CentOS 8.5 为例，演示 Redis 的安装、密码设置及远程连接配置。在开始前，请确保： 已通过 SSH 连接至服务器（建议使用 Root 权限）系统已联网基础工具包已安装：sudo dnf update -y &am…...

编程日记 2025/7/18 4:01:14

【机器学习】使用Python Spark MLlib进行预测模型训练

Spark MLlib 是 Spark 的机器学习 (ML) 库。它的目标是使实用的机器学习变得可扩展且易于使用。从高层次上讲，它提供了以下工具： ML 算法：常见的学习算法，如分类、回归、聚类和协同过滤特征化：特征提取、转换、降维和…...

编程日记 2025/7/18 13:59:29

简单聊聊Oracle和MySQL数据库的区别和使用场景

对于IT的技术人员，MySQL是非常熟悉的开源数据库，在各个行业被广泛应用。但是对于Oracle数据库，很多专业的IT从业人员不太了解，今天就来聊一聊Oracle和MySQL的一些区别。 1. 使用场景首先MySQL是在各种IT公司或者非IT公司广泛应用…...

编程日记 2025/7/15 1:07:22

qt QOffscreenSurface详解

1、概述 QOffscreenSurface 是 Qt 中用于离屏渲染的一个类。它允许在不直接与屏幕交互的情况下进行 OpenGL 渲染操作，常用于生成纹理、预渲染场景等。通过 QOffscreenSurface，可以在后台创建一个渲染表面，进行绘制操作，并将结果捕…...

编程日记 2025/7/18 1:29:34

【软件测试】：软件测试实战

1. ⾃动化实施步骤 1.1 编写web测试⽤例 1.2 ⾃动化测试脚本开发 common public class AutotestUtils {public static EdgeDriver driver;// 创建驱动对象public static EdgeDriver createDriver(){// 驱动对象已经创建好了 / 没有创建if( driver null){driver new EdgeDr…...

编程日记 2025/7/17 10:19:47

springboot使用netty做TCP客户端

1、服务端文档说明 ## 1. 概述本文档描述了Socket模拟器的通信协议实现细节，包括数据包格式、字节序、编码方式等信息。## 2. 通信基础### 2.1 连接方式 - 协议类型：TCP - 网络层：IPv4 (AddressFamily.InterNetwork) - 传输方式：流…...

编程日记 2025/7/20 15:20:09

【NLP 49、提示工程 prompt engineering】

目录一、基本介绍语言模型生成文本的基本特点提示工程 prompt engineering 提示工程的优势使用注意事项 ① 安全问题 ② 可信度问题 ③ 时效性与专业性二、应用场景能 ≠ 适合应用场景 —— 百科知识应用场景 —— 写文案应用场景 —— 解释 / 编写…...

编程日记 2025/7/19 7:57:55

Axure RP设计软件中的各种函数：包括数字、数学、字符串、时间及中继器函数，详细解释了各函数的用途、参数及其应用场景。

文章目录引言函数分类数字函数数学函数字符串函数时间函数函数中继器函数引言在axure交互设计时，函数可以用在条件公式和需要赋值的地方，其基本语法是用双方括号包含，变量值和函数用英文句号连接。在交互事件编辑器中通过fx按钮插入函数表达式，例如设置文本内容为： …...

编程日记 2025/7/15 21:46:40

Logback使用和常用配置

Logback 是 Spring Boot 默认集成的日志框架，相比 Log4j，它性能更高、配置更灵活，并且天然支持 Spring Profile 多环境配置。以下是详细配置步骤及常用配置示例。一、添加依赖（非 Spring Boot 项目） 若项目未使用 Sp…...

编程日记 2025/7/16 5:28:02

赛季7靶场 -- Code -- HTB writeup（Just hint）

本系列仅说明靶场的攻击思路，不会给出任何的详细代码执行步骤，因为个人觉得找到合适的工具以实现攻击思路的能力也非常重要。 1.首先我们对靶场进行了Nmap扫描，很快我们发现了Web应用端口何SSH端口 2.显然我们无法直接突破ssh，因为…...

编程日记 2025/7/14 19:18:53

vue3 ts 封装axios,配置axios前置拦截器，让所有axios请求携带token

http.ts

app.ts

vue文件

相关文章：