Vue中的请求拦截器

目录

1 前言

2 使用方法

2.1 创建拦截器

2.2 引入拦截器


1 前言

我们常常会使用JWT令牌来验证登录,因此很多请求都需要携带JWT令牌,我们当然可以用{headers:{Authorization:xx}}的方式,向每个请求中都以这样的方式添加JWT令牌。不过这样做就过于繁琐,因此我们可以采用请求拦截器的方式来简化操作。

2 使用方法

2.1 创建拦截器

在src目录下,创建一个utils文件夹,再向其中创建一个request.js文件

//创建公共前缀
const baseURL = '/api';
const instance = axios.create({ baseURL });//请求拦截器
instance.interceptors.request.use((config) => {//其它代码...//其中tokenStore.token为JWT令牌if (tokenStore.token) {config.headers.Authorization = tokenStore.token}return config},(err) => {return Promise.reject(err);}
)
//导出接口
export default instance;

2.2 引入拦截器

在api文件夹下的接口中以如下方式导入即可:

import request from "@/utils/request.js";

使用如下:

//其它..
export const userRegisterService = () => {//其它代码...//params为携带的参数return request.post('/user/register', params)
}

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

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

相关文章

同样的代码,开发环境生效,测试环境不生效,记一次问题排查过程和原因分析

我的公众号:IT周瑜 今天有同事遇到这样一个问题,有一个新增接口在本地和开发环境的swagger上都能看到,但是在测试环境的swagger上却看不到,并且确定测试环境是最新的代码,并重新构建和部署了。 按照同事的描述,首先我得确定是不是swagger的问题,我先检查我们平台组是否…

javaEE - 23( 21000 字 Servlet 入门 -1 )

一:Servlet 1.1 Servlet 是什么 Servlet 是一种实现动态页面的技术. 是一组 Tomcat 提供给程序猿的 API, 帮助程序猿简单高效的开发一个 web app. 构建动态页面的技术有很多, 每种语言都有一些相关的库/框架来做这件事,Servlet 就是 Tomcat 这个 HTTP…

[第五天】C++继承:单继承、多继承、菱形继承和虚继承的深度解析

一、单继承 1、概述 C最重要的特征是代码重用,通过继承机制可以利用已有的数据类型来定义新的数据类型,新的类不仅拥有旧类的成员,还拥有新定义的成员。 例如一个B类继承于A类,或称从类A派生类B。这样的话,类A成为基类…

2月06日,每日信息差

第一、建业地产有40个项目入围“白名单”,项目分布在郑州、信阳、焦作、洛阳等城市。接近建业地产人士表示,因各城市项目申报、审批工作进度不同,各城市项目的“白名单”申报工作还在持续进行,相关审批通过后,公司入围…

零基础学Python之面向对象

1.面向对象编程简介 (1)什么是面向对象 面向对象程序设计(Object Oriented Programming)作为一种新方法,其本质是以建立模型体现出来的抽象思维过程和面向对象的方法。模型是用来反映现实世界中事物特征的。任何一个模型都不可能反映客观事…

StarRocks 1 月社区动态(2024)

StarRocks 在 2023 年不断进化,锤炼核心功能,打磨全新特性,成功实现了从全场景 OLAP 到云原生湖仓的全面升级,成为湖仓新范式的造浪者。2024 年,我们期待与您一同续写新篇章,共同迈向“极速统一”的新征程&…

使用#if 和 #endif 实现注释,及原因

注释我们代码中经常使用, 单行注释和多行注释我们都会经常用到。 但是有些场景下这两种注释并不是很方便,这样我们就可以使用上面的两个宏来对代码进行注释。 什么情况下使用那两种注释不方便? 1. 如果代码很多时,我们如果一行一行…

【Qt】常见问题

1.存在未解析的标识符 将build文件夹删掉重新编译。 2.左侧项目目录栏无法删除已添加项目 打开目标项目上一级的pro文件,将目标文件名字注释或者删除掉,最后保存,qt就会自动更新,将该项目隐藏掉。 3.在qt creator下添加槽函数…

c++运算符优先级

这里写目录标题 C运算符优先级定义了表达式中运算符的计算顺序。当一个表达式中有多个运算符时,运算符的优先级决定了哪些运算符先被计算。下面是C中一些常见运算符的优先级列表,从高到低排序: 阿里云参考链接:developer.aliyun.c…

模拟串口LV2,解决硬件串口资源不足问题!!!!

模拟串口通信 2.0 版本!! 我在前面的文章里面有写了 虚拟串口通信,虽然说能用,但是用过的小伙伴都说 “好!” 优缺点: 先说一点,2.0版本并不适用于同硬件串口的所有场合,仅仅针对自己开发的电子垃圾的主…

[office] 网优必备的10大经典函数公式! #知识分享#媒体

网优必备的10大经典函数公式! Excel软件看似简单,其实花样很多,尤其Excel表格。但其实只要用心多练,效率轻松提升个十倍百倍真不是问题!赶紧一起来get新技能吧~ ▋函数公式一 我们都知道从网管中查询出来的经纬度是没有小数点的。我看到不…

护眼灯色温多少合适?推荐五款合适色温的护眼台灯

很多人在购买台灯之后只会根据周围环境灯光的明暗调节亮度,对于色温的了解并不多,不知道色温应该调节到什么数值比较合适,有些人也根本没有意识到色温在影响人情绪方面起着重要作用,接下来就一起来看一下色温的标准。 一、什么色…

Day4.

单链表 #include <head.h>typedef struct List{int value;struct List *pointe; }*list; list create_space() {list s(struct List *)malloc(sizeof(struct List)); //向堆区申请空间s->pointe NULL;//初始化s->value 0;return s; } list inserhead_list(lis…

AI改编游戏大电影《使命召唤:幽灵重生》(下)

AI改编游戏大电影《使命召唤&#xff1a;幽灵重生》&#xff08;下&#xff09; 幽灵重生携生化武器毁灭人类&#xff0c;普莱斯上尉点上雪茄拿起武器&#xff0c;英雄再次迎来使命的召唤&#xff01; 《使命召唤&#xff1a;幽灵重生》&#xff08;下&#xff09;&#xff1a…

电力负荷预测 | 基于TCN的电力负荷预测(Python)———结果比对

文章目录 效果一览文章概述源码设计参考资料效果一览 文章概述 电力负荷预测 | 基于TCN的电力负荷预测(Python)———结果比对 python3.8 keras2.6.0 matplotlib3.5.2 numpy1.19.4 pandas1.4.3 tensorflow==2.6.0

【宝藏系列】嵌入式入门概念大全

【宝藏系列】嵌入式入门概念大全 0️⃣1️⃣操作系统&#xff08;Operating System&#xff0c;OS&#xff09; 是管理计算机硬件与软件资源的系统软件&#xff0c;同时也是计算机系统的内核与基石。操作系统需要处理管理与配置内存、决定系统资源供需的优先次序、控制输入与输…

jquery写表格,通过后端传值,并合并单元格

<!DOCTYPE html> <html> <head><title>Table Using jQuery</title><style>#tableWrapper {width: 100%;height: 200px; /* 设置表格容器的高度 */overflow: auto; /* 添加滚动条 */margin-top: -10px; /* 负的外边距值&#xff0c;根据实际…

Days 20 ElfBoard 板 FFmpeg移植

FFmpeg是一套可以用来记录、转换数字音频、视频&#xff0c;并能将其转化为流的开源计算机程序。采用LGPL或GPL许可证。它提供了录制、转换以及流化音视频的完整解决方案。因此&#xff0c;对于从事多媒体技术开发的工程师来说&#xff0c;深入研究FFMPEG成为一门必不可少的工作…

C++ 11新特性之tuple

概述 在C编程语言的发展历程中&#xff0c;C 11标准引入了许多开创性的新特性&#xff0c;极大地提升了开发效率与代码质量。其中&#xff0c;tuple&#xff08;元组&#xff09;作为一种强大的容器类型&#xff0c;为处理多个不同类型的值提供了便捷的手段。tuple是一种固定大…

NLP_神经概率语言模型(NPLM)

文章目录 NPLM的起源NPLM的实现1.构建实验语料库2.生成NPLM训练数据3.定义NPLM4.实例化NPLM5.训练NPLM6.用NPLM预测新词 NPLM小结 NPLM的起源 在NPLM之前&#xff0c;传统的语言模型主要依赖于最基本的N-Gram技术&#xff0c;通过统计词汇的共现频率来计算词汇组合的概率。然而…