如何通过axios拦截器,给除了登录请求以外,axios的所有异步请求添加JWT令牌!

在 Vue 项目中配置除了登录请求以外的所有请求的令牌,通常涉及到在请求头中添加令牌(Token)信息。这可以通过使用 Axios 或其他 HTTP 请求库来实现。以下是一般的步骤:

1. **安装 Axios**:

如果你还没有安装 Axios,可以使用以下命令安装它:

   ```bash
   npm install axios
   ```

2. **创建 Axios 实例**:

你可以创建一个全局的 Axios 实例,并在该实例中配置请求拦截器,以在每个请求中添加令牌信息。

   ```javascript
   // main.js 或其他入口文件

import Vue from 'vue'
import App from './App.vue'
import router from "@/router/router"
import element from 'element-ui';
import axios from 'axios'
import 'element-ui/lib/theme-chalk/index.css';
// 在生产环境中禁用警告信息和启用构建优化
Vue.config.productionTip = false// 创建一个 Axios 实例
const axiosInstance = axios.create({baseURL: 'http://localhost:8080/qy', // 通用后端 Url 地址timeout: 5000, // 请求最大等待时间
})// 添加请求拦截器
axiosInstance.interceptors.request.use((config) => {// 获取请求的URLconst requestUrl = config.url;// 提取URL路径部分/qy/Login...const urlPath = new URL(requestUrl).pathname;// 在请求头中添加令牌信息const jwtToken = localStorage.getItem('jwtToken') // 从本地存储中获取令牌// 检查是否是登录请求,这里假设登录请求的URL是 '/Login'if (urlPath !== '/qy/Login' && urlPath !== '/qy/LogOut') {console.log(urlPath);// 如果不是登录请求,添加令牌到请求头if (jwtToken) {config.headers.Authorization = `${jwtToken}`}}return config},(error) => {return Promise.reject(error)}
)// 将 Axios 实例添加到 Vue 原型中,以便在组件中使用
// Vue.prototype.axios axios便在组件中使用如:this.$axios
Vue.prototype.axios = axiosInstanceVue.use(element)
new Vue({router,render: h => h(App),
}).$mount('#app')

在上面的代码中,我们创建了一个 Axios 实例 `axiosInstance`,并在请求拦截器中检查本地存储中是否存在令牌,如果存在,则将其添加到请求头中的 `Authorization` 字段中。
   ```

   

3. **在需要发送请求的组件中使用 Axios**:

现在,你可以在组件中使用 `$http` 来发送请求,这将包括令牌信息。

   ```javascript

   // 在组件中发送请求this.$http.get('/api/some-endpoint').then((response) => {// 处理响应}).catch((error) => {// 处理错误})


   ```

4. **登录时设置令牌**:

在用户登录成功后,你需要将令牌保存到本地存储中(或者使用 Vuex 管理),以便在后续请求中使用。

   ```javascript
   // 在登录成功后保存令牌到本地存储
   localStorage.setItem('token', 'your_token_here')
   ```

实际情况可能会因项目的需求而有所不同。还需要确保在用户登录后、注销时、令牌过期时等情况下进行适当的令牌管理和更新。

此外,安全性也是非常重要的,令牌应该以安全的方式传输和存储,并且需要考虑令牌的有效期管理。

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

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

相关文章

java 从字符串中 输出连续的整数

java 从字符串中 输出连续的整数 //编写程序,从键盘输入一个字符串,内有数字和非数字字符 // 如xy12ab93?5789$,连续的数字为一个整数。 // 例如:字符串中有3个整数:12 93 5786.统计整数个数,并依次输出 import java…

Java中的继承是什么?

在Java中,继承是一种面向对象编程的概念,它允许一个类(称为子类或派生类)继承另一个类(称为父类或基类)的属性和方法。通过继承,子类可以获得父类的属性和方法,并且可以添加自己的特…

使用命令行快速创建Vite项目

一、构建项目 在终端中使用如下命令行: npm create vite 二、定义项目名称 三、选择项目类型 Vanilla是我们常用的JavaScript,Vue和React是常用前端框架,可以根据自己的需要进行选择 通过上下键进行选择,按下回车进行确认 创建…

js 采集pcm,并封装为wav,包含重采样,提供下载

<!DOCTYPE html> <html lang"en"> <head> <meta charset"UTF-8"> <meta name"viewport" content"widthdevice-width, initial-scale1.0"> <title>录制音频并下载为WAV文件</title…

docker容器安装MongoDB数据库

一&#xff1a;MongoDB数据库 1.1 简介 MongoDB是一个开源、高性能、无模式的文档型数据库&#xff0c;当初的设计就是用于简化开发和方便扩展&#xff0c;是NoSQL数据库产品中的一种。是最 像关系型数据库&#xff08;MySQL&#xff09;的非关系型数据库。 它支持的数据结构…

一种便捷的爬虫方法

发现了种快捷的爬虫方法 1.在“检查-Network”要模拟的post请求记录右键-Copy-Copy as cUrl(bash) 2.替换下面代码中文本内容&#xff0c;搞定 import uncurl import requestsresponseeval(uncurl.parse( curl http://xxxxx \-H Accept: application/json, text/plain, */* …

Neo4j图数据库_web页面关闭登录实现免登陆访问_常用的cypher语句_删除_查询_创建关系图谱---Neo4j图数据库工作笔记0013

由于除了安装,那么真实使用的时候,就是导入数据了,有了关系和节点的csv文件以后如果用 cypher进行导入数据和创建关系图谱,还有进行查询,以及如果导入错误如何清空,大概是这些 用的最多的,单独把这些拿进来,总结一下,用的会比较方便. 1.实现免登陆访问: /data/module/neo4j-…

Spring学习笔记6 Bean的实例化方式

Spring学习笔记5 GoF之工厂模式_biubiubiu0706的博客-CSDN博客 Spring为Bean提供了多种实例化方式,通常包括4中(目的:更加灵活) 1.通过构造方法实例化 2.通过简单工厂模式实例化 3.通过factory-bean实例化 4.通过FactoryBean接口实例化 新建模块 spring-005 依赖 <!--S…

结构体,联合体与位段

1.结构体的内存对齐(计算结构体的大小) 1.1 为什么需要结构体内存对齐? 原因1:平台原因 不是所有的硬件平台都能访问任意地址上的任意数据的&#xff1b;某些平台只能在某些地址处取得某些特定类型的数据&#xff0c;否则抛出硬件异常。 比如&#xff0c;当一个平台要取一个…

OpenCV项目开发实战之数码单反相机的技术方面介绍

在这篇文章中,我们将解释数码单反相机的各个技术方面。我们将解释焦距、光圈值、景深、光圈、快门速度、ISO 设置、图像稳定和自动包围曝光。 数码单反相机(或 DSLR – 数码、单反、镜头、反光)是一种数码相机,它使用反光镜机制将相机镜头发出的光线反射到光学取景器,或者…

35.浅谈贪心算法

概述 相信大家或多或少都对贪心算法有所耳闻&#xff0c;今天我们从一个应用场景展开 假设存在下面需要付费的广播台&#xff0c;以及广播台信号可以覆盖的地区。 如何选择最少的广播台&#xff0c;让所有的地区都可以接收到信号&#xff1f; 广播台覆盖地区k1北京、上海、天津…

Qt5开发及实例V2.0-第二十二章-Qt.Quick Controls 2新颖界面开发

Qt5开发及实例V2.0-第二十二章-Qt.Quick Controls 2新颖界面开发 第22章 Qt Quick Controls 2新颖界面开发22.1 Qt Quick Controls 2简介22.1.1 第一个Qt Quick Controls 2程序22.1.2 Qt Quick Controls 2程序的构成 22.2 Qt Quick Controls 2与1的比较22.2.1 ApplicationWindo…

紫光展锐6nm国产5G处理器T820_国产手机芯片5G方案

紫光展锐T820是一款采用先进6nm EUV工艺的芯片&#xff0c;采用134三丛集八核心CPU架构&#xff0c;由1个主频为 2.7GHz 的 Arm Cortex-A76 大核和 3个主频为2.3GHz 的Arm Cortex-A76大核以及4个主频为2.1GHz的 Arm Cortex-A55组成 &#xff0c;支持高达3MB 三级缓存&#xff0…

MySQL 篇

目录 1、数据库三范式 2、数据库事务的特性 3、MySQL数据库引擎 4、说说 InnoDB 与 MyISAM 的区别 5、索引是什么&#xff1f; 6、索引数据结构 7、MySQL 索引类型有哪些&#xff1f; 8、索引有什么优缺点&#xff1f; 9、索引设计原则 9、使用索引应该注意些什…

ubuntu 开启笔记本摄像头并修复画面颠倒问题

文章目录 基本环境状况&#xff1a; 没找到摄像头检查 opencv检查系统应用 键盘右侧&#xff0c;硬件层面开启摄像头画面镜像问题 基本环境 笔记本&#xff1a; 联想拯救者 系统&#xff1a; ubuntu 22.04 状况&#xff1a; 没找到摄像头 检查 opencv 使用 cv::VideoCaptu…

实验室安全教育与考试

目录 我的错题&#xff08;2个&#xff09;新知识题目&#xff08;10个&#xff09;刚开始不太理解的题目&#xff08;10个&#xff09;写在最后&#xff08;免责声明&#xff09; 我的错题&#xff08;2个&#xff09; 18.发生电气火灾时可以使用的灭火设备包括&#xff1a;&…

【100天精通Python】Day65:Python可视化_Matplotlib3D绘图mplot3d,绘制3D散点图、3D线图和3D条形图,示例+代码

1 mpl_toolkits.mplot3d 功能介绍 mpl_toolkits.mplot3d 是 Matplotlib 库中的一个子模块&#xff0c;用于绘制和可视化三维图形&#xff0c;包括三维散点图、曲面图、线图等。它提供了丰富的功能来创建和定制三维图形。以下是 mpl_toolkits.mplot3d 的主要功能和功能简介&am…

银行竞争度-地级市HHI+CRn(2000-2022年)

地级市的银行竞争度数据&#xff0c;其计算方法参考了姜付秀&#xff08;2019&#xff09;的方法。原始来源于中国银监会的金融许可证信息&#xff0c;用以测算各银行在各城市的年度分支机构数量&#xff0c;进而构建各城市银行业的赫芬达尔一赫希曼指数&#xff08;HHI&#x…

《动手学深度学习 Pytorch版》 7.1 深度卷积神经网络(AlexNet)

7.1.1 学习表征 深度卷积神经网络的突破出现在2012年。突破可归因于以下两个关键因素&#xff1a; 缺少的成分&#xff1a;数据 数据集紧缺的情况在 2010 年前后兴起的大数据浪潮中得到改善。ImageNet 挑战赛中&#xff0c;ImageNet数据集由斯坦福大学教授李飞飞小组的研究人…

js对象属性

在面向对象的语言中有一个标志&#xff0c;那就是都有类&#xff0c;通过类可以创建任意多个相同属性、方法的对象。在js中没有类的存在&#xff0c;所以js中的对象&#xff0c;相对于类语言中对象有所不同。 js中定义对象为&#xff1a;“无序属性的集合&#xff0c;其属性可…