7.怎么配置一个axios来拦截前后端请求

首先创建一个axios.js文件

导入我们所需要的依赖

import axios from "axios";
import Element from 'element-ui'
import router from "./router";

设置请求头和它的类型和地址

注意先注释这个url,还没有解决跨域问题,不然会出现跨域

// axios.defaults.baseURL = "http://localhost:8081"
const request = axios.create({timeout: 5000,headers: {
//请求头的格式要求为json'Content-Type': 'application/json; charset=utf-8'}
})
request.interceptors.request.use(config => {
//将localStorage中的token放入请求头config.headers['Authorization'] = localStorage.getItem("token") // 请求头带上tokenreturn config
})

设置后端返回给前端数据的处理方式

//就是当后端返回给前端code的值来回馈不同的效果
request.interceptors.response.use(response => {let res = response.data;console.log("response")console.log(res)if (res.code === 200) {return response} else {Element.Message.error(res.msg? res.msg : '系统异常!', {duration: 3 * 1000})return Promise.reject(response.data.msg)}},error => {console.log(error)if(error.response.data) {error.message = error.response.data.msg}if(error.response.status === 401) {router.push("/login")}Element.Message.error(error.message, {duration: 3 * 1000})return Promise.reject(error)}
)

将他暴露出来

export default request

然后在main.js中修改

import axios from 'axios'
Vue.prototype.$axios = axios //

修改为

import request from "./axios";
Vue.prototype.$axios = request

就可以了

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

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

相关文章

计算机网络-http协议和https的加密原理

HTTP(HyperText Transfer Protocol,超文本传输协议)是用于在万维网(World Wide Web)上传输超文本的基础协议。它定义了客户端(通常是浏览器)和服务器之间的文本数据传输格式和规则。以下是HTTP的…

假如家里太大了,wifi连不上了怎么办

最近有个土豪朋友抱怨,他家里太大了,一个路由器的Wi-Fi信号根本无法覆盖他们家的每个房间,都没办法上网看奥运会比赛了。(还好我是穷人,就没有这种烦恼T_T)。 然后我问他为何不用一个路由器作主路由器&…

BGP对等体组、聚合、路由反射器、联盟、团体属性

一.实验拓扑 二.实验需求 1.AS1中存在两个环回,一个地址为192.168.1.0/24,该地址不能在任何协议中宣告 As3中存在两个环回,一个地址为192.168.2.0/24,、该地址不能在任何协议中宣告,最终要求这两个环回可以ping通; 2.整个AS2的I…

vue el-input 输入框下拉显示匹配数据

1、效果图: 2、需求&实现: 输入条件 下面匹配查询到的数据有多少个 需要调用后端接口展示,后端查询到之后返回条数 前端展示 3、具体代码实现: html: 图片需要自己根据实际情况增加 // 查询 重置 筛选 本文章…

delphi 12 学习如何登陆网站下载文件

启动时等待验证码. 输入验证码后,等待处理数据 处理完成后,显示数据 实现原理:利用已有的账号和密码登录后产生的cookie,向服务器请求数据.返回的数据是JSON格式,后期需要自己整理. 注意,请在程序中使用同一个TnetHttpClient控件来完成.因为里面保存了cookie信息 需要了解的知…

btslab靶场-通过xss获取他人cookie并利用

目录 安装 通过xss获取cookie cookie利用 安装 下载btslab靶场链接:https://pan.baidu.com/s/1I9ZgzlZEWdobINGQUhy7Jw?pwd8888 提取码:8888 用phpEnv或者phpStudy部署好靶场环境(这里就省略了) 通过xss获取cookie 先访问…

Golang | Leetcode Golang题解之第316题去除重复字母

题目&#xff1a; 题解&#xff1a; func removeDuplicateLetters(s string) string {left : [26]int{}for _, ch : range s {left[ch-a]}stack : []byte{}inStack : [26]bool{}for i : range s {ch : s[i]if !inStack[ch-a] {for len(stack) > 0 && ch < stack…

通过Java实现插入排序(直接插入,希尔)与选择排序(直接选择,堆排)

目录 &#xff08;一&#xff09;插入排序 1.直接插入排序 &#xff08;1&#xff09;核心思想&#xff1a; &#xff08;2&#xff09;代码实现&#xff08;以从小到大排序为例&#xff09;&#xff1a; &#xff08;3&#xff09;代码分析&#xff1a; 2.希尔排序&#xff08…

MQ消息队列篇:三大MQ产品的必备面试种子题

MQ有什么用&#xff1f; MQ&#xff08;消息队列&#xff09;是一种FIFO&#xff08;先进先出&#xff09;的数据结构&#xff0c;主要用于实现异步通信、削峰平谷和解耦等功能。它通过将生产者生成的消息发送到队列中&#xff0c;然后由消费者进行消费。这样&#xff0c;生产…

(四)activit5.23.0修复跟踪高亮显示BUG

一、先看bug 在 &#xff08;三&#xff09;springboot2.7.6集成activit5.23.0之流程跟踪高亮显示 末尾就发现高亮显示与预期不一样&#xff0c;比如上面的任务2前面的箭头没有高亮显示。 二、分析原因 具体分析步骤省略了&#xff0c;主要是ProcessInstanceHighlightsResour…

【iOS】暑假第二周——网易云APP 仿写

目录 前言首页关于UINavigationBarAppearance “我的”账号夜间模式——多界面传值遇到的问题所用到的其他知识整理NSNotificationreloadData各种键盘模式 总结 前言 有了之前仿写ZARA的基础&#xff0c;本周我们仿写了网易云APP&#xff0c;在这里对多界面传值进行了首次应用—…

算力共享中神经网络切片和算力分配策略

目录 神经网络切片 按照算力的分布进行网络层数切片;就是算力越强,运算神经网络层数越多 神经网络切片和算力占比进行映射 算力分配策略 get_current_shard 神经网络切片 按照算力的分布进行网络层数切片;就是算力越强,运算神经网络层数越多 神经网络切片和算力占比进…

【MySQL】索引——索引的引入、认识磁盘、磁盘的组成、扇区、磁盘访问、磁盘和MySQL交互、索引的概念

文章目录 MySQL1. 索引的引入2. 认识磁盘2.1 磁盘的组成2.2 扇区2.3 磁盘访问 3. 磁盘和MySQL交互4. 索引的概念4.1 索引测试4.2 Page4.3 单页和多页情况 MySQL 1. 索引的引入 海量表在进行普通查询的时候&#xff0c;效率会非常的慢&#xff0c;但是索引可以解决这个问题。 -…

PHP中关于排名和显示的问题

&#x1f3c6;本文收录于《CSDN问答解惑-专业版》专栏&#xff0c;主要记录项目实战过程中的Bug之前因后果及提供真实有效的解决方案&#xff0c;希望能够助你一臂之力&#xff0c;帮你早日登顶实现财富自由&#x1f680;&#xff1b;同时&#xff0c;欢迎大家关注&&收…

RabbitMQ应用场景及特性

RabbitMQ是一款开源的消息队列中间件&#xff0c;拥有非常好用的管理控制面板&#xff0c;类似使用navicat一样&#xff0c;简便的操纵数据库。 应用场景 一、流量削峰 在一些并发量较高的场景下&#xff0c;比如秒杀活动&#xff0c;抢票等&#xff0c;同一时间访问量急剧增…

【Linux】shell命令与Linux权限的概念

目录 一、shell命令二、Linux权限的概念2.1 Linux权限的概念2.1.1 用户2.1.2 指令2.1.2.1 su指令2.1.2.2 sudo指令 2.2 Linux权限管理2.2.1 文件访问者的分类&#xff08;人&#xff09;2.2.2 文件类型和访问权限&#xff08;事物属性&#xff09;2.2.2.1 文件类型2.2.2.2 基本…

[240804] OpenTofu 1.8.0 发布,带来更友好的编码体验 | 生成式 AI 滥用现象分析

目录 OpenTofu 1.8.0 发布&#xff0c;带来更友好的编码体验生成式 AI 滥用现象分析 OpenTofu 1.8.0 发布&#xff0c;带来更友好的编码体验 OpenTofu 1.8.0 现已发布&#xff0c;主要功能包括&#xff1a; 变量和局部值的早期求值: 现在可以在模块源、后端配置和状态加密等更…

使用 1panel面板 部署 springboot 和 vue

代码仓库&#xff1a;还没弄 目录 网站介绍安装步骤1. 准备云服务器2. 准备域名&#xff08;可跳过&#xff09;3. 安装1panel面板4. 服务器开放端口5. 进入1panel面板6. 安装并启动软件&#xff08;服务器和面板开放端口&#xff09;7. 打包并上传项目7.1 打包 Java项目&#…

网页保护用户 小tips

在使用创建web开发的过程中&#xff0c;直接使用用户名url&#xff0c;容易造成用户信息的被攻击&#xff0c;例如对方直接访问 ../../.../username 的网页&#xff0c;可以窃取用户信息&#xff0c;然而把usename变成一堆乱码就安全的多 效果&#xff1a; 代码&#xff1a;…

想做抖音短视频,视频素材去哪里找啊?

各位抖音上的短视频创作者们&#xff0c;是否曾幻想过自己的作品能够在全网爆火&#xff0c;却常因为缺少那些能够让视频更加生动的素材而感到困扰&#xff1f;不用担心&#xff0c;今天我要为大家介绍几个优秀的视频素材网站&#xff0c;让你的抖音之路顺风顺水&#xff01; …